伪代码的简单例子_CSS 伪元素的一些罕见用例

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

父子元素悬停特效

由于伪元素属于其父元素，因此存在一些不寻常的用例。现在，让我们看一个简单的示例。

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

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

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

简单明了，接着我们将此概念延伸到更有用的用例。

项目/博客组

在我的网站上，有一个部分需要列出了所有的项目名称。我想为每个项目添加一个缩略图，但这对我来说并不是最重要的事情。对我来说，更重要的是链接本身。不久前，我在[Ethan Marcotte][1]网站上首次看到了这种效果。

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

「HTML」

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 ishadeed.com and a11ymatters.com on CSS, UX Design and Web Accessibility.




1.向 hero 元素添加 padding

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

2.对伪元素进行绝对定位

为了绝对定位它们，我需要定义哪个父类是相对的父类。它应该被添加到hero中 。

注意以下GIF中的位置：.hero部分中的position: relative是如何影响伪元素的。