翻译 | CSS伪元素的罕见用例

前言

纯手打翻译，其中翻译不准确，请多包涵，欢迎指正

Demo 在每一个小段落的结尾

这篇文章翻译自Uncommon Use Cases For Pseudo Elements

作者： Ahmad Shadeed

转载需要作者授权

伪元素 的使用已经很长时间了。然而，我觉得有很多用例在开发人员中并不完全为人所知。我写下这篇文章是为了阐明它们，这样它们就可以被更多地使用。

亲子悬停效果

伪元素 是属于它的父元素，所以有一些不寻常的用例。现在，让我们探索一个简单的例子来说明我的意思。

这个设计是：有一个章节标题，它的左边有一个小圆圈。当我们将鼠标悬停在标题上时，圆圈会变大。

.section-title:before {
    content: "";
    width: 20px;
    height: 20px;
    background: blue;
    /* Other styles */
}

.section-title:hover:before {
    transform: scale(1.2);
}

简单而直接。让我们将这个概念扩展到更多有用的用例上。

项目 / 博客 Section

在我的网站上，我有一个Section用来列出我的所有项目。我想为每个项目添加一个缩略图，但这不是我最优先考虑的事情。对我来说，更重要的是链接本身。我在Ethan Marcotte的网站上首次看到了这种效果。

上面的设计模型显示了我想应用的想法。段落中的每个彩色链接都有一个与之配对的伪元素。

<section class="hero">
    <p>Hello, my name is Ahmad. I’m a UX Designer and Front End Developer that enjoys the intersection between design and code. I write on <a href="www.ishadeed.com" class="link-1">ishadeed.com</a> and <a href="www.a11ymatters.com" class="link-2">a11ymatters.com</a> on CSS, UX Design and Web Accessibility.</p>
</section>

1）给hero添加padding

我想为伪元素 保留空间，因此添加padding是解决这个问题的一个方案。

2）绝对定位伪元素

为了绝对定位它们，我需要定义哪一个父元素是相对的。它应该被添加到hero部分。

请注意下面的GIF，position: relative从.hero中删除对伪元素有何影响。

3）添加伪元素

最后一步是添加伪元素以及悬停效果。这是我的做法：

.link-1 {
  color: #854FBB;
}

@media (min-width: 700px) {
  .link-1:after {
    content: "";
    position: absolute;
    right: 0;
    top: 20px;
    width: 150px;
    height: 100px;
    background: currentColor;
    opacity: 0.85;
    transition: 0.3s ease-out;
  }

  .link-1:hover {
    text-decoration: underline;
  }

  .link-1:hover:after {
    transform: scale(1.2);
    opacity: 1;
  }
}

请注意，我已经使用currentColor作为伪元素的背景，如果您不知道这个关键字，它的意思是继承其父关键字的color值。所以在任何时候，我都想改变链接的颜色，同样会作用在其伪元素上。

如果你感到好奇，请转到我的网站主页，查看“我的项目”部分。我已经使用了上面的技术。

增加可点击区域的大小

通过向链接添加伪元素 ，链接周围的可点击区域将变大。这非常有用，可以为用户带来更好的体验。举个栗子：

此外，它还可以用来扩展具有多链接视图的卡组件的可点击区域。请注意，文章的内容(如标题和图像)将位于伪元素之上，因此不会影响选择文本或保存图像。

详情请查看CodePen Demo

叠加层

假设有一个带有背景图片的元素，并且设计中包含一个渐变叠加层，其混合模式设置为color。伪元素 可以帮到您。

.hero {
  position: relative;
  height: 300px;
  background: url("image.jpg") center/cover;
}

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #851717 0%, #30328C 100%);
  mix-blend-mode: color;
}

详情请查看CodePen Demo

包裹的阴影

我不确定命名是否正确，但这就是我得到的。过去，我曾经创建过一个在边缘倾斜的阴影。它有一点微妙的效果。你猜怎么着！可以使用伪元素来完成它们。

1）创建元素

我使用以下常规样式创建了一个div元素。

.elem {
     position: relative;
     display: flex;
     align-items: center;
     max-width: 400px;
     background: #fff;
     padding: 2rem 1rem;
     font-size: 1.5rem;
     margin: 2rem auto;
     text-align: center;
     box-sizing: border-box;
}

2）添加伪元素

然后，我添加:before和:after伪元素 ，每个元素的宽度为50% (为了解释，我为每个元素添加了不同的背景)。

.elem:before,
.elem:after {
    content: "";
    position: absolute;
    top: 2px;
    width: 50%;
    height: 100%;
}

.elem:before {
    left: 0;
    background: grey;
}

.elem:after {
    right: 0;
    background: #000;
}

接下来，我将添加transform: skew(x)，其中x = 2。其中一个的 x 应该为负数以实现所需的效果。

.elem:before {
    transform: skew(-2deg);
}

.elem:after {
    transform: skew(2deg);
}

接下来，我将向每个伪元素添加 z-index:-1，以将其放置到其父元素的后面。

完成后，我将执行以下操作：

添加 filter: blur
降低不透明度
添加了从透明到黑色的渐变（以隐藏其父级顶部中心的伪元素边缘）

最终代码

.elem {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 400px;
  background: #fff;
  padding: 2rem 1rem;
  font-size: 1.5rem;
  margin: 2rem auto;
  text-align: center;
  box-sizing: border-box;
}

.elem:before,
.elem:after {
    content: "";
    position: absolute;
    top: 3px;
    width: 50%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, #000);
    filter: blur(3px);
    opacity: 0.3;
}

.elem:before {
    left: 0;
    transform: skewY(-2deg);
}

.elem:after {
    right: 0;
    transform: skewY(2deg);
}

还有另一个选项，即在: before 和: after 伪元素之间交换 skewY 值。这将得到不同的效果。

详情请查看CodePen Demo

使用 : after Vs : before

在最近的Twitter 讨论中，我了解到最好使用:before代替:after。为什么？因为在使用时:after，可能需要我们向其他嵌套元素添加z-index，这样伪元素就不会重叠它们。让我们举一个真实的栗子。

<article class="card">
  <img src="article.jpg" alt="">
  <h2>Title here</h2>
</article>

要在文本下方添加渐变叠加层，我将需要使用伪元素。您会选择哪一个？:before还是:after？让我们一起探索。

1）After Element

在这种情况下，标题将显示在伪元素叠加图的下方，如下所示。

解决方案是添加z-index到card-title中。即使这是一个快速简便的解决方案，也不是正确的选择。

.card-title {
    /*Other styles*/
    z-index: 1;
}

2）Before Element

在:before叠加层上使用元素时，默认情况下可以使用！无需添加z-index到card-title。原因是在使用时:before，该元素不会出现在其他同级项的上方，而当使用:after时则会出现。

详情请查看CodePen Demo

基于文件扩展的样式链接

例如，有一个带有 PDF 文件的链接，那么可以添加一个 PDF 图标来使用户更加清楚。

下面是一个如何显示链接的 PDF 图标的例子:

HTML

<p><a href="example.pdf">Download PDF</a></p>
<p><a href="example.doc">Download Doc</a></p>

CSS

a[href$=".pdf"]:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 18px;
  height: 18px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/np_pdf_377198_000000.svg) center/20px no-repeat;
  padding: 3px;
}

分隔符

对于这个示例，有一个带有 “或” 的分隔符并且每一边都有一条线。可以使用伪元素 和 Flexbox 来实现。

HTML

<p>Or</p>

CSS

p {
  display: flex;
  align-items: center;
}

p:before, p:after {
  content: "";
  height: 2px;
  background: #c5c5c5;
  flex-grow: 1;
}

p:before {
  margin-right: 10px;
}

p:after {
  margin-left: 10px;
}

事实证明，有一个更好的方法来做到这一点。在这种情况下使用 <hr> 会更好。

查看CodePen Demo了解更多