CSS 中的伪元素能做什么，其实在《伪元素能帮助我们做些什么》一文中就和大家探讨过。我们知道伪元素可以帮助我们 清除浮动、制作Icon图标、分割线、CSS Tooltips、CSS计数器 等事情。其实除了这些常见的事情之外，CSS 伪元素还可以帮助我们做一些非常有趣的事情，这些有趣的事情也称得上是 CSS 方面的小技巧吧。接下来，和大家聊聊这方面的话题。

可以用伪元素做些有趣的事情

正如《伪元素能帮助我们做些什么》一文所介绍的那样，CSS的伪元素 ::before 和 ::after 可以帮助我们做很多事情，并且在做这些事情的时候又可以减少 HTML 的结构。今天不想和大家深度聊伪元素如何使用，只是想和大家聊一些有趣而又适用的事情，或者说是小技巧吧。这些小技巧的思路都是来源于 Twitter 上的一些信息（我平日有逛Twitter）的习惯：

比如上图中所述的，使用伪元素构建渐变的蒙层、渐变阴影和渐变边框等。

当然，你可能知道使用其他的 CSS 技术来完成上面 Twitter 提到的效果，但接下来我们来看 CSS 伪元素是如何实现这些效果的。

CSS 的伪元素

前段时间在聊 CSS 计数器的奇妙世界（Part1、Part2 和 Part3） 的时候就花了很长的篇幅介绍了 CSS Generated Content Module Level 3：

元素的::before 和 ::after 的 content 可以生成伪元素内容！

简单的说，元素的 ::before 和 ::after 相当于一个标签元素：

<div>content</div>

div::before,
div::after {
    content: ''
}

相当于：

<div>
    <div class="before"></div>
    content
    <div class="after"></div>
</div>    

这样一来，一个 HTML 元素就具备多个盒模型（多出两个盒子），如下图所示：

有了新增的伪元素，除了让 HTML 结构变得更简洁之外，还可以借助伪元素帮我们做更多有趣的事情。

卡片蒙层

在 Web 设计中，我们发现自己越来越多地把文字放在图片上面。很多时候，这样做对于用户体验来说是存有一定风险的。图片有动态的颜色和亮度，而文字在大多数情况下是一种固定颜色。这对于可读性和可访问性来说往往是一场恶梦。

这意味着我们要在图像和文字之间引入一个覆盖层（蒙层）。有时，这将使用背景图像变暗，足以保证可读性。针对这种场景，一般来说会有三个分层：

• 图像
• 渐变的蒙层（覆盖图片的层）
• 内容层

假设我们要实现类似下面这样的一个横幅的效果：

为了节省不必要的 HTML 元素，上图效果中的渐变蒙层采用伪元素::before 或 ::after 来实现。这样一来，实现上面示例的 HTML 结构大致像下在这样：

<div class="hero">
    <div class="hero__content">
    </div>
    <img class="hero__figure" src="hero.png">
</div>

有不同的方法来实现这一点。如果图片纯粹是为了装饰目的，我们可以在.hero中使用background-image来替代<img>，否则像上面示例代码一样，使用 <img>元素。

添加 CSS 代码：

.hero {
    position: relative;
    min-height: 500px;
}

.hero__figure {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

/* 伪元素制作蒙层 */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.5);
}

.hero__content {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    text-align: center;
}

还可以把::after上的透明颜色换成带有透明度的渐变：

.hero {
    overflow: hidden;
}

.hero::after,
.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    background-color: rgb(0 0 0 / 0.5);
    opacity: 0.5;
    transform: skew(15deg) translateX(-50%);
    width: calc(100vw + 50%);
}

.hero::before {
    transform: skew(-15deg) translateX(-50%);
}

再加点animation的料：

.hero::after,
.hero::before {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%; /* 必不可少 */
    background-color: rgb(0 0 0 / 0.5);
    opacity: 0.5;
    transform: skew(15deg) translateX(-50%);
    width: calc(100vw + 50%);
    animation: gradient 5s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

你可以看到示例中渐变的蒙层会动起来，效果如下：

上面我们采用的是绝对定位实现的布局效果，其实我们可以用更现代的方法来实现层叠布局效果，即 CSS 网格布局。

如果使用网格布局来构建上面示例横幅效果的话，需要在.hero中使用 display: grid 创建一个网格容器，然后其每个层都使用 grid-area: 1 / -1 将网格容器中的网格项目放置在同一个网格区域：

.hero {
    display: grid;
    height: 500px;
}

.hero__content {
    z-index: 1; /* ① */
    grid-area: 1 / -1;
    display: flex;
    flex-direction: column;
    margin: auto; /* ② */
    text-align: center;
}

.hero__figure {
    grid-area: 1 / -1;
    object-fit: cover; /* ③ */
    width: 100%;
    height: 100%;
    min-height: 0; /* ④ */
}

/* 伪元素制作蒙层 */
.hero::after,
.hero::before {
    content: "";
    background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    background-color: rgb(0 0 0 / 0.5);
    opacity: 0.5;
    transform: skew(15deg);
    width: calc(100vw + 50%);
    animation: gradient 5s ease infinite;
    grid-area: 1 / -1;
}

示例中网格布局关键代码：

.hero {
    display: grid;
    height: 500px;
}

.hero__content {
    z-index: 1; /* ① */
    grid-area: 1 / -1;
    display: flex;
    margin: auto; /* ② */
}

.hero__figure {
    grid-area: 1 / -1;
    object-fit: cover; /* ③ */
    min-height: 0; /* ④ */
}

/* 伪元素制作蒙层 */
.hero::after,
.hero::before {
    grid-area: 1 / -1;
}

使用网格审查器，可以网格系统如下：

不幸运的是，我们需要在 .hero 网格容器上设置一个固定的高度，这样 .hero__figure 才能真正发挥作用。（一个高度为 100% 的子项目需要它的父元素有一个明确的固定高度，而不是最小高度）。

代码中标记着重介绍一下，因为他对于我们很重要

• ①：可以在网格项目或Flex项目上使用z-index来控制项目在