Css Block

巧用 Content

基本

我是内容

<p class="base">我是内容</p>
1
.base::before {
    content: '我在前面，';
}
.base::after {
    content: '，我在后面';
}
1
2
3
4
5
6

字符集

字符对照表请查阅：链接

我是内容

<p class="unicode">我是内容</p>
1
.unicode::before {
    content: '\2764';
    color: #ff4f4f;
}
.unicode::after {
    content: '\2618';
}
1
2
3
4
5
6
7

Url

我是内容

<p class="url">我是内容</p>
1
.url::before {
    content: url("https://cn.vuejs.org/images/icons/apple-icon-60x60.png");
}
.url::after {
    content: url("https://react.docschina.org/favicon.ico");
}
1
2
3
4
5
6

注意：图片大小无法控制

Attr

我是内容

<p class="attr" data-before="我在前面，" data-after="，我在后面">我是内容</p>
1
.attr::before {
    content: attr(data-before);
}
.attr::after {
    content: attr(data-after);
}
1
2
3
4
5
6

字符串拼接

Content 可执行字符串、函数间的任意拼接，无需 + 号

我是内容

<p class="string-join" data-after="后面">我是内容</p>
1
.string-join::before {
    content: '我在前面''，';
}
.string-join::after {
    content: '，我在'attr(data-after)
}
1
2
3
4
5
6

←