CSS进阶篇——伪元素 (pseudo elements)

Posted 2022-10-03 老梁写代码

伪元素（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;