[分享]css中after选择器

CSS中有一个很有用的选择器，它就是:after选择器。这个选择器可以在文档中任何元素的最后面添加一个内容作为其子元素。 .myelement:after { content: ""...

CSS中有一个很有用的选择器，它就是:after选择器。这个选择器可以在文档中任何元素的最后面添加一个内容作为其子元素。

 <style>
  .my-element:after {
    content: "!";
  }
  </style> 

在上面的代码中，我们给一个类名为my-element的元素添加了一个:after选择器，并在其内容中添加了一个感叹号。

当文档渲染时，:after选择器会自动添加在目标元素的最后一个子元素的末尾。可以使用CSS属性来定义:after选择器的属性，比如content、display、position等等。

 <style>
  .my-element:after {
    content: "";
    display: block;
    height: 10px;
    background-color: red;
  }
  </style> 

在上面的代码中，:after选择器定义了一个空的content，并设置了display: block;、height: 10px;和background-color: red;，最终呈现为一个10像素高的红色条。

总之，:after选择器提供了一种简单的方式在元素的末尾添加内容，完全控制其样式，非常实用。