阅读 174

翻译 | 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-indexcard-title中。即使这是一个快速简便的解决方案,也不是正确的选择。

.card-title {
    /*Other styles*/
    z-index: 1;
}
复制代码

2)Before Element

:before叠加层上使用元素时,默认情况下可以使用!无需添加z-indexcard-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了解更多

关注下面的标签,发现更多相似文章
评论