[分享]css中 after什么意思

CSS中的:after伪元素指定要在选择器的末尾插入内容。

 .block:after {
      content: "after content";
    } 

上述代码将在class为block元素的最后插入一个文本内容为“after content”的伪元素。

:after伪元素可用于添加垂直行之间的间隙，如下所示：

 .block {
      border-bottom: 1px solid black;
    }
    .block:last-child:after {
      content: "";
      display: block;
      height: 20px;
    } 

在上面的代码中，使用:last-child伪类选择最后一个元素，并使用:after在其下面添加一个20像素高的空格。

此外，:after伪元素还可用于添加样式效果。例如，可以使用它来添加图标或箭头。

 .block:after {
      content: "";
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 20px;
      background: url('icon.png') no-repeat;
    } 

上述代码将在class为block元素的后面添加一个20 x 20像素的图标，其中使用了display:inline-block属性来避免图标独占一行。