翻译 | 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了解更多