[分享]css中before和after用法详解

CSS中的:before和:after选择器分别是伪元素选择器，它们可以在元素的前面或后面添加内容。这些伪元素可以用来创建一些有趣的效果，比如在文本前面添加图标和段落前面添加引用符号等。使用:befo...

CSS中的:before和:after选择器分别是伪元素选择器，它们可以在元素的前面或后面添加内容。这些伪元素可以用来创建一些有趣的效果，比如在文本前面添加图标和段落前面添加引用符号等。

使用:before或:after时需要给元素设置content属性，否则它们将不会出现在页面上。

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

p:after {
  content: "<<";
} 

上面的代码将在每个段落前面添加两个尖括号(>>)和两个尖括号(<<)。

除了添加内容之外，这两个伪元素还可以用来创建一些有趣的效果。比如，你可以使用它们来为没有子元素的元素添加一些样式。

div:after {
  clear: both;
  content: "";
  display: table;
} 

上面的代码将为每个没有子元素的

p:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  transition: all 0.5s ease;
}

p:hover:before {
  height: 20px;
  width: 20px;
}