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 伪元素。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- --- ------ - ----- ----------------
----- ---------------- --------------------------------------------------------------------------------
-------
------ -
--------- ---------
-------- ---- -----
----------------- -----
------ -----
------- -----
---------- -----
------- --------
-
------------- -
-------- ---
------------- ------
------------- --- - --- ----
------------- ----------- ----------- ----------- -----
--------- ---------
----- --
-
--------
-------
------
-------------------
-------
-------在这个示例中，我们使用了 Normalize.css 来重置浏览器默认样式，并使用 before 伪元素在按钮的左侧添加了一个小三角形。
总结
CSS Reset 是一个常用的前端技术，可以使得不同浏览器之间的页面表现更加一致。但是，在使用 CSS Reset 后，我们可能会遇到 before 和 after 伪元素样式被重置的问题。为了解决这个问题，我们可以使用 Normalize.css 文件来提供合理的默认样式，并在其基础上使用 before 和 after 伪元素。希望本文能够对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658c0744eb4cecbf2d15ba6a