作者：ahman译者：FrontendXiaozhi来源：css-tricks之前好评文章的更多分类，也整理了我的大量文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。伪元素已经存在了很长时间。但是，我觉得有些用例并没有被所有开发人员完全理解。我写这篇文章是为了澄清它们，以便它们可以被更多地使用。父子悬停效果伪元素有一些不寻常的用例，因为它们属于它们的父元素。现在，让我们看一个简单的例子。这个设计有一个节标题，左边有一个小圆圈。当我们将鼠标悬停在部分标题上时，圆圈会变大。.section-title:before{内容:"";宽度：20px；高度：20px；背景：蓝色；/*其他样式*/}.section-title:hover:before{transform:scale(1.2);}简单明了，我们将这个概念扩展到更有用的用例。项目/博客组在我的站点上，有一个部分需要列出所有项目名称。我想为每个项目添加缩略图，但这对我来说不是最重要的。对我来说更重要的是链接本身。我第一次看到这种效果是在EthanMarcotte网站上。上面的设计模型显示了我想要应用的想法。段落中的每个彩色链接都有一个与之配对的伪元素。HTML你好，我叫艾哈迈德。我是一名UX设计师和前端开发人员，喜欢设计和代码之间的交集。我写在ishadeed.com和a11ymatters.com关于CSS、UX设计和Web可访问性。
1.为英雄元素添加padding我想为伪元素预留空间，所以添加padding是一个解决方案。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。2.伪元素的绝对定位为了绝对定位，我需要定义哪个parent是相对parent。它应该被添加到英雄。请注意下面的GIF中.hero部分中的position:relative如何影响伪元素。3.添加伪元素最后一步是添加伪元素及其悬停效果：.link-1{color:#854FBB;}@media(min-width:700px){.link-1:after{content:"";位置：绝对；右：0；顶部：20px；宽度：150px；高度：100px；背景：当前颜色；不透明度：0.85；过渡：0.3s缓出；}.link-1:hover:after{transform:scale(1.2);不透明度：1；}}请注意，我使用currentColor作为伪元素背景色。如果不知道这个关键字，就表示继承其父元素的颜色值。因此，任何时候我想更改链接的颜色，只需更改一次即可。示例源码：https://codepen.io/shadeed/pe...增加可点击区域的大小通过给链接添加伪元素，链接周围的可点击区域会变大。这非常有用，可以增强用户体验。举个例子：另外，它可以用来扩展带有查看更多链接的卡片组件的可点击区域。注意文章的内容（比如标题和图片）会放在伪元素上面，所以不会影响文字的选取或者图片的保存。叠加假设你有一个带有背景图像的元素，并且在设计中有一个渐变叠加，并且混合模式设置为颜色，伪元素可以帮助你。.hero{位置：相对；高度：300px；背景：url（“image.jpg”）中心/封面；}.hero：之后{内容：“”；位置：绝对；左：0；顶部：0；宽度：100%；高度：100%；背景图像：线性渐变（180deg，#8517170%，#30328C100%）；mix-blend-mode:color;}示例源代码：https://codepen.io/shadeed/pe...wrappedshadows过去，我常常创建一个边缘倾斜的阴影。它有一个稍微微妙的效果。你猜怎么了！它们可以使用伪元素来实现。create元素创建一个具有以下常规样式的div元素。.elem{位置：相对；显示：弹性；对齐项目：居中；最大宽度：400px；背景：#fff；填充：2rem1rem；字体大小：1.5rem；;box-sizing:border-box;}添加伪元素然后我为每个宽度为50%的元素添加了:before和:after伪元素（为了更好的演示，我添加了不同的背景）.elem:before,.elem：之后{内容：“”；位置：绝对；顶部：2px；宽度：50%；高度:100%;}.elem:before{left:0;背景：灰色；}.elem:after{右:0;background:#000;}接下来，添加transform:skew(x)，其中X为2度。对于其中之一，X应为负数才能达到预期效果。接下来，我将向每个伪元素添加z-index:-1以将其移到其父元素后面。完成后，执行以下操作：添加过滤器：模糊降低透明度添加从透明到黑色的渐变（以隐藏其父元素顶部中心的伪元素边缘）最终代码.elem{position:relative;显示：弹性；对齐项目：居中；最大宽度：400px；背景：#fff；填充：2rem1rem；字体大小：1.5rem；保证金：2rem自动；文本对齐：居中；box-sizing:border-box;}.??elem:before,.elem:after{content:"";位置：绝对；顶部：3px；宽度：50%；高度：100%；z-指数：-1；背景：线性渐变（到底部，透明，#000）；过滤器：模糊（3px）；不透明度：0.3;}.elem:before{left:0;transform:skewY(-2deg);}.elem:after{right:0;transform:skewY(2deg);}另一个选项是在伪元素:before和:after之间交换skewY值。示例源代码：https://codepen.io/shadeed/pe...:afterVS:before在最近的Twitter讨论中，我了解到最好使用:before而不是:after。为什么？因为在使用:after的时候，我们可能需要给其他嵌套元素加上z-index，这样伪元素就不会和它们重叠。让我们举一个真实的例子。这是一张由缩略图和标题组成的简单卡片。请注意，在缩略图太亮的情况下，文本下方将有一个渐变叠加层以使文本更清晰。Titlehere
要在文本下方添加渐变叠加层，我需要使用伪元素。你会选哪一个？：之前或：之后？让我们做一些研究。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。1.afterelement这种情况下title会显示在伪元素overlay下面，像这样：解决方法是给cardtitle加上z-index。即使这是一个简单快捷的解决方案，也不是正确的做法。.card-title{/*Otherstyles*/z-index:1;}2.before元素使用:before元素时，可以默认使用！无需将z-index添加到卡片标题。原因是带有:before的元素不会出现在其他兄弟元素之上，而当元素为:after时它会出现在其他兄弟元素之上。示例源代码：https://codepen.io/shadeed/pe...基于文件扩展名的链接样式例如，如果您有一个包含PDF文件的链接，您可以添加一个PDF图标以使其更清晰用户。下面是如何显示链接的PDF图标的示例HTML下载PDF
下载文档
CSSa[href$=".pdf"]:before{content:"";显示：内联块；垂直对齐：中间；右边距：8px；宽度：18px；高度：18px；背景：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/pe...separator在此示例中，有一个带有“或”的分隔符。每边都有一条线。这可以通过伪元素和flexbox来实现。HTML或
CSSp{display:flex;对齐项目：居中；}p：之前，p：之后{内容：“”；高度：2px；背景：#c5c5c5；弹性增长：1；}p:before{margin-right:10px;}p:after{margin-left:10px;}示例源码：https://codepen.io/shadeed/pe...原文：https://www.网站点。com/hid...代码部署后可能出现的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
