71. CSS3 生成内容

在 Web 中插入内容，在 CSS2.1 时代依靠的是 JavaScript 来实现。但进入 CSS3 进代之后我们可以通过 CSS3 的伪类:before，:after和 CSS3 的伪元素::before、::after来实现，其关键是依靠 CSS3 中的content属性来实现。不过这个属性对于 img 和 input 元素不起作用。

content 配合 CSS 的伪类或者伪元素，一般可以做以下四件事情：

实例展示：

在 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 生成内容的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。