详解css3中的伪类before和after常见用法

1. 介绍

在CSS中，伪类是一种特殊的选择器，用于选择不在DOM树中的元素。伪类可以为这些元素添加样式，以实现一些特殊的效果。其中，:before和:after是CSS3中两个常见的伪类，它们允许在元素的内容前面或之后插入内容。

2. :before伪类

2.1 创建元素的内容

:before伪类可以用于在元素的内容之前插入新内容。可以通过content属性来定义插入的内容，例如：

.element:before {
  content: "前缀 ";
}

上述代码会在class为.element的元素的内容之前插入一个带有文本"前缀 "的元素。

2.2 设置插入内容的样式

通过:before伪类，还可以为插入的内容设置样式，例如：

.element:before {
  content: "前缀";
  color: red;
}

上述代码会将插入的前缀文本设置为红色。

2.3 插入图标

除了文本内容，还可以通过:before伪类插入图标。这需要使用CSS的content属性以及字体图标库或SVG图标。例如，使用字体图标库Font Awesome来插入一个箭头图标：

.element:before {
  content: "\f105";
  font-family: 'Font Awesome';
}

上述代码会在class为.element的元素的内容之前插入一个箭头图标。

3. :after伪类

3.1 创建元素的内容

:after伪类与:before伪类类似，用于在元素的内容之后插入新内容。可以通过content属性来定义插入的内容。

3.2 设置插入内容的样式

通过:after伪类，同样可以为插入的内容设置样式。

3.3 清除浮动

:after伪类的一个常见用法是用于清除浮动。当元素内部存在浮动元素时，可以使用:after伪类来清除浮动，以避免父元素塌陷。例如：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

上述代码定义了一个.clearfix类，其使用:after伪类在内容之后插入一个空元素。通过设置clear: both;，可以清除浮动，使得.clearfix元素具有正确的高度。

4. 总结

:before和:after伪类是CSS3中常见的伪类，它们可以用于在元素的内容之前或之后插入新内容。可以通过content属性定义插入的内容，并可以设置样式。同时，它们还可以用于清除浮动。使用这些伪类可以为网页设计带来更多的可能性。