CSS中的:after伪元素指定要在选择器的末尾插入内容。 .block:after { content: after content ; } 上述代码将在class为block元素的最后插入一个文本
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属性来避免图标独占一行。
粉丝
0
关注
0
收藏
0