SomeRareUseCasesofCSSPseudo-Elements伪元素已经存在很长时间了。但是，我觉得有些用例并没有被所有开发人员完全理解。我写这篇文章是为了澄清它们，以便它们可以被更多地使用。父子悬停效果伪元素有一些不寻常的用例，因为它们属于它们的父元素。现在，让我们看一个简单的例子。这个设计有一个节标题，左边有一个小圆圈。当我们将鼠标悬停在部分标题上时，圆圈会变大。.section-title:before{content:"";width:20px;height:20px;background:blue;/*Otherstyles*/}.section-title:hover:before{transform:scale(1.2);}很简单清楚，然后我们将这个概念扩展到更有用的用例。项目/博客组在我的站点上，有一个部分需要列出所有项目名称。我想为每个项目添加缩略图，但这对我来说不是最重要的。对我来说更重要的是链接本身。我不久前在[EthanMarcotte][1]网站上第一次看到这种效果。上面的设计模型显示了我想要应用的想法。段落中的每个彩色链接都有一个与之配对的伪元素。「HTML」你好，mynameisAhmad.I'maUXDesignerandFrontEndDeveloperthatenjoystheintersectionbetweendesignandcode.Iwriteonishadeed.com和a11ymatters.comonCSS,UXDesignandWebAccessibility.
1.给英雄元素加padding我想给伪元素预留空间，所以加padding是一种解决方法。2.伪元素的绝对定位为了绝对定位，我需要定义哪个parent是相对parent。它应该被添加到英雄。请注意下面的GIF中.hero部分中的position:relative如何影响伪元素。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.3season-out;}.link-1:hover{text-decoration:underline;}.link-1:hover:after{transform:scale(1.2);opacity:1;}}请注意，我使用currentColor作为伪元素的背景色。如果不知道这个关键字，就表示继承其父元素的颜色值。因此，任何时候我想更改链接的颜色，只需更改一次即可。示例源代码：https://codepen.io/shadeed/pen/66e9c2039b50463d96a2a9832f05ec0f增加可点击区域的大小通过给链接添加伪元素，链接周围的可点击区域会变大。这非常有用，可以增强用户体验。举个例子：另外，它可以用来扩展带有查看更多链接的卡片组件的可点击区域。注意文章的内容（比如标题和图片）会放在伪元素上面，所以不会影响文字的选取或者图片的保存。叠加假设你有一个带有背景图像的元素，并且在设计中有一个渐变叠加，并且混合模式设置为颜色，伪元素可以帮助你。.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,#8517170%,#30328C100%);mix-blend-mode:color;}示例源代码：https://codepen.io/shadeed/pen/627c62e16dfa49021960cdc74ce459ba包裹阴影过去，我常常创建一个边缘倾斜的阴影。它有一个稍微微妙的效果。你猜怎么了！它们可以使用伪元素来实现。1.创建元素div元素使用以下一般样式创建。.elem{position:relative;display:flex;align-items:center;max-width:400px;background:#fff;padding:2rem1rem;font-size:1.5rem;margin:2remauto;text-align:center;box-sizing:border-box;}2.添加伪元素然后，我在每个宽度为50%的元素上添加了:before和:after伪元素（为了更好的演示，我添加了不同的背景）.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应为负数才能达到预期效果。c4a1.png"target="_blank">c4a1.png"width="auto"border="0"height="auto"alt=""title="">接下来我将在每个伪元素索引中添加z：-1将其移到其父元素后面。完成后，执行以下操作：添加滤镜：模糊降低透明度添加从透明到黑色的渐变（以隐藏其父元素顶部中心的伪元素边缘）3.最终代码.elem{position:relative;display:flex;align-items:center;max-width:400px;background:#fff;padding:2rem1rem;font-size:1.5rem;margin:2remauto;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(tobottom,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值。示例源代码：https://codepen.io/shadeed/pen/be104604ada76a7fa854bffca1d6b806:afterVS:before在最近的Twitter讨论中，我了解到最好使用:before而不是:after。为什么？因为在使用:after时，可能需要我们为其他嵌套元素添加z-index以便伪元素不会与它们重叠。让我们举一个真实的例子。这是一张由缩略图和标题组成的简单卡片。请注意，在缩略图太亮的情况下，文本下方将有一个渐变叠加层以使文本更清晰。c4da7cfddea045b3b20947a448bab.png"target="_blank">c4da7cfddea045b3b20947a448bab.png"width="auto"border="0"height="auto"alt=""title="">Titlehere
要在文本下方添加渐变叠加层，我需要使用伪元素。你会选择哪个？：之前或：之后？让我们调查一下。1.afterelement这种情况下title会显示在伪元素overlay下面，像这样：解决方法是给cardtitle加上z-index。即使这是一个简单快捷的解决方案，也不是正确的做法。.card-title{/*其他样式*/z-index:1;}2.before元素当使用:before元素时，它默认工作！无需在卡片标题中添加z-index。原因是带有:before的元素不会出现在其他兄弟元素之上，而当元素为:after时它会出现在其他兄弟元素之上。示例源代码：https://codepen.io/shadeed/pen/0032e918818efe33b9016434a98bf6ff基于文件扩展名的链接样式例如，如果您有一个包含PDF文件的链接，您可以添加一个PDF图标，使用户更清楚.以下是如何显示链接的PDF图标“HTML”的示例DownloadPDF
DownloadDoc
「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/20pxno-repeat;padding:3px;}示例源码:https://codepen.io/shadeed/pen/24ecff4a6e9269d1ee526ec692151af4separator在此示例中，有一个带有“or”的分隔符。每边都有一条线。这可以通过伪元素和flexbox来实现。「HTML」或
「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;}示例源代码：https://codepen.io/shadeed/pen/314cc43ddbd4ac384f02551d8907a323
