CSS 伪元素罕见用例： :after VS :before

terry 2年前 (2023-09-27) 阅读数 63 #数据结构与算法

伪元素已经使用了很长时间。然而，我觉得有些用例并非所有开发人员都完全理解。我写这篇文章是为了澄清它们，以便更频繁地使用它们。

父子效应

因为伪元素属于它们的父元素，所以有一些不寻常的用例。现在让我们看一个简单的例子。

此设计有一个部分名称，其左侧有一个小圆圈。当我们将鼠标移到部分名称上时，圆圈会变大。

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

.section-title:hover:before {
    transform: scale(1.2);
}
复制代码

简单明，让我们将这个概念扩展到更有用的用例。

项目/博客组

我的网站上有一个部分列出了所有项目名称。我想为每个项目添加缩略图，但这对我来说不是最重要的。对我来说，链接本身更重要。我最近在Ethan马科特的网站上第一次看到这种效果。

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

HTML

<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。给英雄元素添加

padding 我想为伪元素保留空间，所以添加 padding 就是解决方案。

大家都说简历上没有项目，所以我帮你找了项目，并添加了【构建指南】。

2。伪元素的绝对定位

为了绝对定位它们，我需要定义哪个父类是相对父类。应添加到英雄。

注意: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.io/shadeed/pen...

增加可点击区域

向链接添加伪元素会增加链接周围的可点击区域。这非常有用，将改善用户体验。举个例子：

另外，它还可以用来扩展具有显示多个链接功能的卡片组件的可点击区域。请注意，文章内容（例如标题和图像）将位于伪元素上方，因此不会影响文本选择或图像存储。

叠加

假设您的设计中有一个元素带有背景图像和渐变叠加，混合模式设置为颜色，伪元素可以提供帮助。

.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.io/shadeed/pen...

波浪阴影

过去我创建了一个边缘倾斜的阴影。它有一个稍微微妙的效果。你猜怎么了！它们可以使用伪元素来实现。

创建元素

使用以下通用样式创建元素 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;
}
复制代码

添加伪元素

然后我添加了：before和：after❀❙❀5％宽度为5％的伪元素（为了清楚起见,我向每个元素添加了其他背景）

.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;
}
复制代码

 接下来添加变换：倾斜（x），其中 X 是 2 度。对于其中之一，X 应为负数才能达到预期效果。 
 接下来，我将 z-index: -1 添加到每个伪元素，以便它移动到其父元素后面。 
完成后，请执行以下操作：
添加过滤器：模糊
降低透明度
添加了从透明到黑色的过渡（隐藏顶部伪元素边框）最终代码.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);
}
复制代码
还有另一种选择，即将值 skewY 和  交换为： :po

。

示例源代码：codepen.io/shadeed/pen…

:after VS :before

我在最近的 Twitter 讨论中了解到，最好使用 :before ：po。为什么？因为使用 :after 可能需要我们将 z-index 添加到其他嵌套元素，以便伪元素不会与它们重叠。让我们举一个真实的例子。

这是一张由缩略图和标题组成的简单卡片。请注意，文本下方会有渐变叠加，以使其更亮，以防缩略图太亮。

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

复制代码

我需要使用伪元素在文本下方添加渐变叠加。你会选择哪一个？：之前或：之后？我们来研究一下。

大家都说简历上没有项目，所以我帮你找了项目，并添加了【构建指南】。

`1。在元素`

后面在这种情况下，标题出现在覆盖伪元素下面，如下所示：

解决方案是将 z-index 添加到卡的名称中。尽管这是一种简单快速的解决方案，但它并不是正确的解决方案。

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

`2。元素`

之前使用元素时：before可以用作默认值！无需在卡名称中添加 z-index。这是因为当使用 :before 时，该元素不会出现在其他同级元素之上，而当元素为 :after 时，它将出现在其他同级元素之上。优越的。

示例源代码：codepen.io/shadeed/pen…

`基于文件扩展名的链接样式`

例如，如果您有一个包含 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;
}
复制代码

源代码示例：codepen.io/shadeed/pen…
 该分隔符行的示例是 There are delimiters ”或”。每边都有一条线。您可以使用伪元素和 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;
}
复制代码
案例源码：codepen.io/shadeed/pen…
作者：前端小智8://post_543.51:2403ef 51
 来源：掘金队
 版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明来源。