[分享]css中before是做什么的

CSS中的:before是一个伪元素，用于向被选择元素生成一个内容。它在元素的内容之前插入一个虚拟元素。:before常用于创建一些特殊的效果，比如在每个列表项前面添加一个圆点或者一个图片等等。下面是...

CSS中的:before是一个伪元素，用于向被选择元素生成一个内容。它在元素的内容之前插入一个虚拟元素。:before常用于创建一些特殊的效果，比如在每个列表项前面添加一个圆点或者一个图片等等。下面是一些使用:before的例子：

ul li:before {
  content: "●";
  margin-right: 10px;
} 

上面的代码会在每个无序列表项前面添加一个圆点，而内容是使用CSS中的 content 属性添加的。这同样也可以用图片来替换：“content: url('image.png')”。

:before和:after的用法类似，但是它们的位置不同。:before是在元素内部的内容之前插入一个虚拟元素，而:after则是在元素内部的内容之后插入一个虚拟元素。这意味着:before的内容会出现在元素内容的最前面，而:after的内容会出现在元素内容的最后面。

在使用:before时，需要注意一些事项。首先，需要设置 content 属性，这是必须的。其次，在:before后面加上一些样式，比如 color、font-size 或者 padding-left 等等都可以。最后，需要给:before添加一个 display 属性，不然它是不会显示的。

ul li:before {
  content: "●";
  margin-right: 10px;
  color: #666;
  font-size: 14px;
  display: inline-block;
} 

上面的代码演示了如何在:before中添加样式。添加了一个深灰色，大小为14像素的圆点，并且使这个圆点以行内块元素的形式显示。

总的来说，:before是一个非常有用的CSS属性，用于在元素的内容前面添加一些特殊的效果，比如图像、圆点等等。它的用法十分灵活，但需要注意一些细节。