css-tutorial/chapters/013 伪元素.md

# 伪元素

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

如果你的上司安排给你一个任务，将一篇文章的每个段落的首字母变大，你将如何实现这个功能呢？
![css伪元素](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/128.jpg)

幸运的是，css恰好提供了这个功能。你可以使用`::first-letter`实现这个需求。
```css
p::first-letter {
    color: blue;
    float: left;
    font-size: 2.6em;
    font-weight: bold;
    line-height: 1;
    margin-inline-end: 0.2rem;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="013 Pseudo-elements_01" src="https://codepen.io/AhCola/embed/PomrPEm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/PomrPEm">
  013 Pseudo-elements_01</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

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

## 一.`::before`和`::after`

`::before`和`::after`这两个伪元素的功能是配合`content`属性在目标元素内部创建一个子元素，`::before`在目标元素头部创建一个元素，`::after`在目标元素尾部创建一个元素。
```css
.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`等。
```css
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}
```
## 三.`::first-line`

顾名思义，`::first-line`指示目标的首行。例如`p::first-line`的指示目标是段落的首行。
```css
p::first-line {
    color: red;
    font-weight: bold;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="013 Pseudo-elements_02" src="https://codepen.io/AhCola/embed/vYmqGGQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/vYmqGGQ">
  013 Pseudo-elements_02</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

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

## 四.`::backdrop`

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

看一个例子，感受下`::backdrop`的作用。
<iframe height="300" style="width: 100%;" scrolling="no" title="013 Pseudo-elements_03" src="https://codepen.io/AhCola/embed/QWvXNBG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/QWvXNBG">
  013 Pseudo-elements_03</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

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

## 五.`::marker`

`::marker`可以用来修改某些元素的标记符号样式，例如`<ul>`和`<ol>`列表项前面的点和数字，也可以更改`<summary>`前面的内容。
<iframe height="300" style="width: 100%;" scrolling="no" title="013 Pseudo-elements_04" src="https://codepen.io/AhCola/embed/zYwVqQL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/zYwVqQL">
  013 Pseudo-elements_04</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

可支持`::marker`修改的css属性有:
- `color`
- `content`
- `white-space`
- `font`属性
- `animation`和`transition`属性

## 六.`::selection`

`::selection`允许你修改选中的文本样式。
```css
::selection {
    background: green;
    color: white;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="013 Pseudo-elements_05" src="https://codepen.io/AhCola/embed/eYWwZqr?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/eYWwZqr">
  013 Pseudo-elements_05</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

`::selection`支持修改的css属性有：
- `color`
- `background-color`属性，不支持`background-image`
- `text`相关属性

## 七.`::placeholder`

在使用`<input>`元素时，通常会添加一个`placeholder`属性提示用户输入。`::placeholder`伪元素用于更改提示文字（placeholder）的样式。
<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/AhCola/embed/rNmELar?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/rNmELar">
  </a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

支持修改的css属性如下：
- `color`
- `background`相关属性
- `font`相关属性
- `text`相关属性


（完）