CSS3中::after伪元素的content属性可以放置各种类型的内容,包括文本、图像和特定的Unicode字符
CSS3中的::after伪元素(pseudo-element)的content属性可以用来在选择器选中的元素内部的末尾插入内容。content属性可以放置各种类型的内容,包括文本、图像和特殊的值attr()
,该值可以用来插入元素的属性值。
以下是一些示例:
- 插入文本内容:
selector::after {
content: '这是插入的文本内容';
}
- 插入图像:
selector::after {
content: url('image.jpg');
}
- 插入元素的属性值,例如插入
<a>
标签的href
属性值:
a::after {
content: ' (' attr(href) ')';
}
- 插入为空(不显示任何内容):
selector::after {
content: '';
}
- 使用
counter()
函数插入序号:
li::after {
content: counter(list-item);
}
- 插入ICON字体:
a::after {
content: '\f0c1'; /* Unicode for a FontAwesome star icon */
font-family: FontAwesome;
}
请注意,为了使content属性生效,必须至少设置display: inline
或display: block
属性。此外,::after伪元素是一个行内元素,如果需要它表现得像块级元素,可以设置display: block
。
评论已关闭