CSS进阶篇——伪元素 (pseudo elements)
Posted feelang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS进阶篇——伪元素 (pseudo elements)相关的知识,希望对你有一定的参考价值。
伪元素(pseudo elements)和伪类(pseudo classes)非常相像,都是依附在选择器上使用 selector:pseudoelement property: value;
。
首字母 & 首行
first-letter
作用于盒模型元素的第一个字母,first-line
作用于最顶部的一行。
p
font-size: 12px;
p:first-letter
font-size: 24px;
float: left;
p:first-line
font-weight: bold;
CSS3 建议用两个冒号表示表示伪元素
p::first-line
,目的是区分伪类,不过最佳实践还是用一个冒号p:first-line
,因为是要兼容老浏览器。
前后内容
before
和 after
这两个伪元素配合 content
属性一起使用,可以在元素前后添加内容而无需改动 html 代码。
content
的属性可以是 open-quote
、close-quote
,也可以是任何引号引起来的字符串,或者是用 url(iamgename)
表示的图片。
blockquote:before
content: open-quote;
blockquote:after
content: close-quote;
li:before
content: "POW! ";
p:before
content: url(images/jam.jpg);
content
属性其实是在 HTML 代码中加了一个 box,所以我们可以给它添加样式:
li:before
content: "POW! ";
background: red;
color: #fc0;
以上是关于CSS进阶篇——伪元素 (pseudo elements)的主要内容,如果未能解决你的问题,请参考以下文章
css 伪元素https://css-tricks.com/pseudo-element-roundup/