CSS3中::after伪元素的content属性可以放置各种类型的内容,包括文本、图像和特定的Unicode字符
warning:
这篇文章距离上次修改已过454天,其中的内容可能已经有所变动。
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。
评论已关闭