[分享]css中before和after的用法

CSS中的:before和:after伪元素，是很有用的CSS特性，经常被用来在HTML元素前后插入内容，以及修饰元素。它们可以让我们以一种比较简单的方式来创建一些有趣的效果，下面就让我们来好好探讨一...

CSS中的:before和:after伪元素，是很有用的CSS特性，经常被用来在HTML元素前后插入内容，以及修饰元素。它们可以让我们以一种比较简单的方式来创建一些有趣的效果，下面就让我们来好好探讨一下这两个伪元素吧。
:before伪元素
:before伪元素可以用来在HTML元素之前插入样式化的内容。我们可以使用content属性来指定要插入的内容。上代码：

p:before {
  content:"前面插入的内容";
} 

这样每个段落的前面都会有个带“前面插入的内容”字样的文本。当然，在实际开发中，我们会用:before伪元素来创建许多不同的效果，例如创建一个带图标的按钮，而不需要在HTML中使用任何的图像。代码如下：

.button:before {
  content: url(icon.png);
  margin-right: 10px;
} 

这个代码就会在带有.button类的元素前面插入一个图标。
:after伪元素
:after伪元素的用途也很像:before伪元素，只是它可以用来在HTML元素之后插入内容。同样，我们可以使用content属性来指定要插入的内容，例如：

p:after {
  content:"后面插入的内容";
} 

这样每个段落的后面都会带有“后面插入的内容”字样的文本。同样，:after伪元素也可以用来创建一些有趣的效果，例如创建箭头样式。代码如下：

.arrow:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #666;
  right: -10px;
  top: 50%;
  margin-top: -10px;
} 

这个代码就会在带有.arrow类的元素后面插入一个箭头。
总结
虽然:before和:after伪元素功效十分强大，但是它们仍然只是伪元素，因此不能完全取代实际的HTML元素。但是，在某些情况下，这两者却可以为设计带来巨大的灵活性和自由度。所以说，掌握这两种伪元素也非常有必要哦！