71. CSS3 生成内容
在 Web 中插入内容,在 CSS2.1 时代依靠的是 JavaScript 来实现。但进入 CSS3 进代之后我们可以通过 CSS3 的伪类:before
,:after
和 CSS3 的伪元素::before
、::after
来实现,其关键是依靠 CSS3 中的content
属性来实现。不过这个属性对于 img 和 input 元素不起作用。
content 配合 CSS 的伪类或者伪元素,一般可以做以下四件事情:
功能 | 功能说明 |
none |
不生成任何内容 |
attr |
插入标签属性值 |
url |
使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源) |
string |
插入字符串 |
实例展示:
在 CSS 中有一种清除浮动的方法叫 clearfix。而这个 clearfix 方法就中就使用了content
,只不过只是在这里插入了一个空格。如下所示:
.clearfix:before,.clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }
上面这个示例是最常见的,也是最简单的,我们再来看一个插入元素属性值的方法。
假设我们有一个元素:
<a href="#" title="我是一个 title 属性值,我插在你的后面">我是元素</a>
可以通过:after
和content:attr(title)
将元素的title
值插入到元素内容“我是元素”之后:
a:after { content:attr(title); color:#f00; }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 71. CSS3 生成内容
码云笔记 » 71. CSS3 生成内容