[分享]css中before不起作用

CSS 中的 ::before 伪元素是在一个元素的内容之前添加一个内容，只需要在样式规则中添加 content 属性即可。 然而，有时候当我们使用 ::before 时，它似乎并没有起作用，这可能是...

CSS 中的 ::before 伪元素是在一个元素的内容之前添加一个内容，只需要在样式规则中添加 content 属性即可。
然而，有时候当我们使用 ::before 时，它似乎并没有起作用，这可能是由多种原因引起的。下面是一些可能的解决方案：
1. 内容为空
如果在使用 ::before 伪元素时，没有为 content 属性设置任何值，那么将不会显示任何内容。确保 content 属性有被设置，如下所示：

p::before {
  content: "before";
} 

2. 没有设置 display 属性
另一个原因是没有设置伪元素的 display 属性。默认情况下，伪元素是以 inline 的方式显示的，因此需要设置它们的 display 属性为 block 或 inline-block，以使其正确地显示在元素之前。

p::before {
  content: "before";
  display: block;
} 

3. 指定了错误的选择器
我们必须正确地指定伪选择器，否则它们将不会生效。如果您的代码没有显示任何效果，那么请检查您的选择器语法。

p::before {
  content: "before";
  display: block;
} 

4. 检查 z-index 属性
如果您的伪元素被其他元素覆盖，那么您可以使用 z-index 属性调整它的 z 轴层级。

p::before {
  content: "before";
  display: block;
  z-index: -1;
} 

总之，为了确保成功地使用 ::before，我们应该确保设置内容、正确的选择器、正确的 display 属性和 z-index 属性。