本篇文章给大家分享一篇关于css中伪元素::before和::after的三个用法，有需要的朋友可以参考一下。
对于:: before和::after的伪元素，在上一篇文章中使用css中:after伪元素来创建了一个很好的叠加效果。但是除了这个，他们还有很多其他的用途。这篇文章将给大家介绍一下::before和::after的其他三个用法。
首先我们来简单看一下伪元素是如何工作的。
关于使用:: after和:: before的注意事项
当且仅当它们具有content属性值时，浏览器才会将这些元素呈现为“生成的内容” 。该值可以设置为空字符串：content: “”;。
立即学习“前端免费学习笔记（深入）”；
当浏览器将此元素插入DOM时，它会将其插入到用于选择器的元素中。这是规范中的定义：
:: before表示在原始元素的实际内容之前表示一个可设置样式的子伪元素
:: after在原始元素的实际内容之后立即表示一个可设置样式的子伪元素。
默认情况下，此新元素将是内联元素。将元素插入DOM后，可以像修改其他元素一样对其进行修改。这给了我们很多控制权来获得各种。
重要说明：并非所有浏览器/屏幕阅读器组合都能读取您放置在content伪元素中的内容。这应该只用于文本元素。应始终将真实内容添加到页面的标记中。
在某些类型的链接旁边添加图标
如果您想为用户提供有关链接的更多可视信息，可以使用:: after添加图标而不添加标记。
将“外部链接”图标添加到非绝对链接的链接处。
a[href^="http"]::after { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg); background-size: contain; content:""; display: inline-block; vertical-align: middle; width: 1em; height: 1em;}
在此代码中，假设将内部链接编写为相对路径，我们找到任何具有以http开头的href元素的锚标记。
此方法的另一个好用的例子是PDF
a[href$=".pdf"]::after { content: " (pdf)"; font-size: .8em; color: tomato;}
对于任何以.pdf结尾的href，我们可以附加字符串“（pdf）。”这个:: after元素比图像更容易控制，因为我们有完整的CSS控件，可以调整字体大小，颜色和任何其他效果。
有关这些选择器的更多信息，大家可以参考PHP中文网的css在线手册。
为容器添加有趣的“边框”
在Houdini Paint API访问所有浏览器之前，您可能会觉得您的元素非常无聊。但使用简单的CSS和:: before和:: after，您可以为所有浏览器带来一些更有趣的效果。
.related-article { padding: 20px; position: relative; background-image: linear-gradient(120deg,#eaee44,#33d0ff);}.related-article * { position: relative; // Set stacking context to keep content on top of the background}.related-article::before { content: ""; background-color: #fff; display: block; position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);}
在此示例中，我们将背景渐变应用于父元素，并使用:: before元素以简单的背景颜色“剪切”内部。尽管是两个矩形，但这给出了边框的外观。要获得适合边框的尺寸，只需要一些简单的数学运算。
通过将伪元素定位为绝对值，我们可以控制其位置。Sass可以通过变量和数学函数使数学运算变得更容易。
如果我们希望我们的标题在它们下面有花哨的小边框，那么如果不是一个完整的边界呢？
我们可以使用:: after元素来实现它。
.cool-border::after { content: ""; display: block; height: 7px; background-image: linear-gradient(120deg, #e5ea15, #00c4ff); position: absolute; top: calc(100% + 5px); left: 50%; width: 45%; transform: translateX(-50%) skew(-50deg);}.cool-border { position: relative;}
在这个例子中，我们还将伪元素置于绝对位置。我们的“边界”的大小取决于新元素的高度。如果这是一个右边或左边的“边框”，你可以使用元素宽度来确定尺寸。
由于这只是页面上的一个元素，我们也可以使边界偏斜。
添加不需要添加样式标记的样式元素
是一个很好的语义元素。我们不要用额外的标记破坏它。
在许多:: after示例（包括本文中的其他示例）中，您可以看到伪元素position: absolute,当然没有规则说这必须是这种情况。
让我们使用:: before和:: after作为grid-items在a上放置引号
。
通过将所有内容明确地放在网格上，我们不必担心额外的包装器。我们也可以使用引号作为背景图像，并允许它们minmax在我们的简单函数中进行缩放grid-template-columns。
最后
其实对于css伪元素:: after和:: before有很多的用法，大家的实际应用中应该也会用到，有更好的用法，欢迎大家留言探讨。
以上就是css伪元素::before和::after的三个用法介绍（代码示例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613020.html
微信扫一扫 
支付宝扫一扫 
