CSS Reset 是一个常见的前端技术，它可以重置浏览器默认样式，使得不同浏览器之间的页面表现更加一致。但是，在使用 CSS Reset 后，我们可能会遇到一个问题：伪元素 before 和 after 的样式被重置了，导致我们无法正常使用它们。
在本文中，我们将介绍如何在 CSS Reset 后使用 before 和 after 伪元素，并提供详细的解决方案和示例代码。
CSS Reset 的问题
在使用 CSS Reset 后，所有元素的样式都被重置了，包括伪元素 before 和 after。这意味着我们不能再像以前那样使用它们来添加一些额外的样式。
例如，我们可能想要在一个按钮的左边添加一个小三角形，代码如下：
<button>按钮</button>
button:before {
content: "";
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #000;
position: absolute;
left: 0;
}但是，在使用 CSS Reset 后，这个样式将不再生效，因为 before 伪元素被重置了。
解决方案
为了解决这个问题，我们可以使用一个称为 Normalize.css 的 CSS 文件。与 CSS Reset 不同，Normalize.css 旨在提供一组合理的默认样式，而不是完全重置所有样式。
在使用 Normalize.css 后，我们可以使用 before 和 after 伪元素来添加样式，而不必担心它们被重置。以下是一个示例：
<button>按钮</button>
button:before {
content: "";
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #000;
position: absolute;
left: 0;
}这将在按钮的左侧添加一个小三角形，就像我们想要的那样。
示例代码
以下是一个完整的示例代码，演示如何在 CSS Reset 后使用 before 和 after 伪元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Reset 后使用 before 和 after 伪元素的解决方案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
button {
position: relative;
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
font-size: 16px;
cursor: pointer;
}
button:before {
content: "";
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #fff;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<button>按钮</button>
</body>
</html>在这个示例中，我们使用了 Normalize.css 来重置浏览器默认样式，并使用 before 伪元素在按钮的左侧添加了一个小三角形。
总结
CSS Reset 是一个常用的前端技术，可以使得不同浏览器之间的页面表现更加一致。但是，在使用 CSS Reset 后，我们可能会遇到 before 和 after 伪元素样式被重置的问题。为了解决这个问题，我们可以使用 Normalize.css 文件来提供合理的默认样式，并在其基础上使用 before 和 after 伪元素。希望本文能够对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658c0744eb4cecbf2d15ba6a