【css要点总结】013 伪元素

伪元素

文章中的codepen deom无法实时预览，点击这里可以获得更好的阅读体验。

伪元素的作用是在不添加任何html代码的情况下可以拥有添加额外的元素的功能，或者是指定某个目标元素。你可以在本节学习伪元素的相关知识。

如果你的上司安排给你一个任务，将一篇文章的每个段落的首字母变大，你将如何实现这个功能呢？

幸运的是，css恰好提供了这个功能。你可以使用::first-letter实现这个需求。

p::first-letter {
    color: blue;
    float: left;
    font-size: 2.6em;
    font-weight: bold;
    line-height: 1;
    margin-inline-end: 0.2rem;
}

See the Pen 013 Pseudo-elements_01 by Pengfei Wang ( @AhCola) on CodePen.

上面的codepen代码，使用了::first-letter伪元素，轻松的实现了上司的需求。CSS拥有很多伪元素，它们都是以::开头的格式，接下来一起看下这些伪元素。

一.::before和::after

::before和::after这两个伪元素的功能是配合content属性在目标元素内部创建一个子元素，::before在目标元素头部创建一个元素，::after在目标元素尾部创建一个元素。

.ele::before {
    content: "";
}
.ele::after {
    content: "";
}

一旦你使用::before和::after创建了伪元素，你可以给这个元素添加样式。但是记住你只能在可以拥有子元素的元素目标上使用::before和::after创建伪元素，例如::before和::after对<img />和<video>等无效。

二.::first-letter

在文章最前面，我们使用::first-letter伪元素完成了上司给我们安排的任务。与::before和::after不同的是，::first-letter并不会创建一个元素，它指示了目标元素内部的首字母，通过::first-letter，我们可以为目标元素的首字母单独设置样式，就像我们使用::first-letter更改段落的首字母的font-size。

但是并不是所有css属性都可以设置，仅可以更改::first-letter指示目标的以下属性：

• color
• 背景属性，例如background、background-image和background-color等。
• 边框属性，例如border、border-color等。
• float
• 字体属性，例如font、font-size和font-weight等。
• 文本属性，例如text-decoration和word-spacing等。

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

三.::first-line

顾名思义，::first-line指示目标的首行。例如p::first-line的指示目标是段落的首行。

p::first-line {
    color: red;
    font-weight: bold;
}

See the Pen 013 Pseudo-elements_02 by Pengfei Wang ( @AhCola) on CodePen.

和::first-letter类似，我们只可以更改部分css属性：

• color
• background属性
• font属性
• text属性

四.::backdrop

backdrop表示背景幕布的意思。::backdrop指示的就是可全屏元素的背景元素，通过::backdrop可以设置全屏元素背景的样式。可全屏元素有<dialog>和<video>。

看一个例子，感受下::backdrop的作用。

See the Pen 013 Pseudo-elements_03 by Pengfei Wang ( @AhCola) on CodePen.

通过::backdrop，将dialog弹出时的背景颜色更改为rgba(100, 10, 10, 0.7);。

五.::marker

::marker可以用来修改某些元素的标记符号样式，例如<ul>和<ol>列表项前面的点和数字，也可以更改<summary>前面的内容。

See the Pen 013 Pseudo-elements_04 by Pengfei Wang ( @AhCola) on CodePen.

可支持::marker修改的css属性有:

• color
• content
• white-space
• font属性
• animation和transition属性

六.::selection

::selection允许你修改选中的文本样式。

::selection {
    background: green;
    color: white;
}

See the Pen 013 Pseudo-elements_05 by Pengfei Wang ( @AhCola) on CodePen.

::selection支持修改的css属性有：

• color
• background-color属性，不支持background-image
• text相关属性

七.::placeholder

在使用<input>元素时，通常会添加一个placeholder属性提示用户输入。::placeholder伪元素用于更改提示文字（placeholder）的样式。

See the Pen by Pengfei Wang ( @AhCola) on CodePen.

支持修改的css属性如下：

• color
• background相关属性
• font相关属性
• text相关属性

附：参考资料

• 谷歌learn css：Pseudo elements

• mdn css: CSS

（完）