CSS::伪元素是怎么回事儿？

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力

我们在实际工作中经常用的两个伪元素, 或许大家都知道, 因为用的比较多, 那就是 ::before 和 ::after,

其实最开始较早的还是 ::first-letter 这个伪元素, 大家能够在比较早的文档/新闻等页面中见得到(现代网页中逐渐被淘汰了: 可能并不是太好看吧..), 那就是文章第一个文字特别大(有脑补画面了吧)占据两行甚至更大.

下面来具体学习下 CSS 中的伪元素..

0. 从最开始的 清除浮动的方法 说起:

清除浮动(虽然现在慢慢用少了有没有), 最常用也是最为推荐的方案之一: 就是使用 ::aftter 这个代表一个元素之后最近的元素,

给浮动元素的容器添加一个类名 .clearfix, 然后给这个 class 添加一个 ::after 伪元素实现元素末尾添加一个看不见的块元素（Block element）并设置如下样式 来清除浮动。

(关键样式: clear:both)

.clearfix::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}
复制代码

1. 什么是伪元素?

1.1 定义

pseudo-element 名为 伪元素, 顾名思义它不是真正的元素, 是一个假元素, 通过 CSS 设置来使用, 并可被客户端用户看到: 通过设置属性 content: '要显示的内容', 来显示其内容

CSS 中伪元素用于设置元素指定部分的样式。(前后 / 开头 / 选中). 默认为内联元素, 如果想设置宽高, 则须要设置其为块元素: display: block

1.2 作用:

伪元素 可用于：

1. 设置元素的首字母、首行的样式
2. 设置在元素的内容之前或之后插入的内容
3. 设置选中元素的样式: 比方常用的选中文本的背景颜色

2. 伪元素 的 使用语法：

/* 选择器::伪元素 { 样式属性 } */
selector::pseudo-element {
  property: value;
}
复制代码

3. CSS 中的伪元素 分类:

最常用的 莫过于 ::before 和 ::after 了吧,

所有 5 个 CSS 伪元素列表:

从字面上理解, 上述中的插入内容到 元素之前 和 元素之后, 但这个 之前和之后 有点小问题,

并不是我们的直觉理解的: 注入的内容将会被插入到目标元素的子元素的前或后，但它会被插入到目标元素下的所有内容的“前”或“后”。

3.1 CSS ::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

如下面的例子在每个 <h1> 元素的内容之前插入一背景图像：

示例中图片为 掘金logo

简单的设置一个图片:

h1::before {
  content: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
复制代码

通过背景设置, 则需要设置的属性比较多了:

还可以设置图片的位置: position, 这里没有列举:

h1::before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  background-size: 100% 100%;
  opacity: 0.36;
  background-repeat: no-repeat;
  background: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
复制代码

3.2 CSS ::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

如下面的例子在每个 <h1> 元素的内容之后插入一幅图像：

示例: 同理 ::before

h1::after {
  content: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
复制代码

3.3 ::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

下面的例子设置所有 <p> 元素中文本的首字母格式：

示例:

p::first-letter {
  color: #b45dea;
  font-size: xx-large;
}
复制代码

注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• 外边距属性
• 内边距属性
• 边框属性
• text-decoration
• vertical-align（仅当 "float" 为 "none"）
• text-transform
• line-height
• float
• clear

伪元素和 CSS 类名

伪元素可以与 CSS class 类名 结合使用：

示例:

p.intro::first-letter {
  color: #b45dea;
  font-size: 200%;
}
复制代码

上面的例子将以红色和较大的字体显示 class="intro" 的段落的首字母。

多个伪元素 也可以组合几个伪元素。

在下面的例子中，段落的第一个字母将是红色，字体大小为 xx-large。第一行的其余部分将变为蓝色，并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色：

::first-letter 示例:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
复制代码

3.4 ::first-line 伪元素

::first-line 伪元素用于向文本的 首行 添加特殊样式。

下面的示例例为所有段落 <p> 元素中的首行添加样式：

示例:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
复制代码

注意：::first-line 伪元素只能应用于块级元素。

适用于 ::first-line 伪元素的属性：

• 字体属性
• 颜色属性
• 背景属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

伪元素的书写方式:

请注意 双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

3.5 CSS - ::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

• color
• background
• cursor
• outline

下面示例使用户所选择的文本在黄色背景上显示为指定颜色：

::selection 示例:

::selection {
  color: #fff;
  background: #b45dea;
}
复制代码