1.:first-letter 伪元素

"first-letter" 会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）【来源于MDN的说明】 ：

注意：

"first-letter" 伪元素只能用于块级元素。

可应用于 "first-letter" 伪元素的属性:

• font 、color 、line-height、background 、margin 、padding 、border 、text-decoration、vertical-align (只有在不浮动的时候)、text-transform、float、clear

实例：

p:first-letter { color: red; font-size: 30px; }
<p>愿你所得过少时，不会终日愤愤；</p>
<p>愿你所得过多时，不必终日惶恐。</p>

效果图：

2. :first-line 伪元素

"first-line"在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

和其他所有的 伪元素一样，:first-line 不能匹配任何真实存在的html元素【来源于MDN的说明】。

注意：

"first-line"伪元素只能在块容器中,所以,:first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，:first-line 是不起作用的.

。

可应用于 "first-line" 伪元素的属性:

• font 、color、line-height、background 、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、clear

实例：

div { width: 300px; border: 5px solid blue; }
p:first-line { color: red; font-size: 20px; }
<div>
<p>每个人都会有一段异常艰难的时光，生活的窘迫，工作的失意，学业的压力，爱的惶惶不可终日。挺过来的，人生就会豁然开朗；挺不过来的，时间也会教会你怎么与它们握手言和，所以你都不必害怕的。</p>
</div>

效果图：

3.:before 伪元素

":before" 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素【来源于MDN的说明】。

实例：

在Hello, world!前面添加一张图片：

h1:before { content: url(qq.png); }
<h1>Hello, world!</h1>

效果图：

在Hello，world！前面添加文字：
h1:before { content: "Say: "; }
<h1>Hello, world!</h1>

效果图：

4. :after 伪元素

":after" 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素【来源于MDN的说明】。

h1:after { content: " --HTML5"; }
<h1>Hello, world!</h1>

效果图：