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控件,可以调整字体大小,色彩和任何其他结果。
有关这些选中器的更多信息,大家可以参照 百分百源码网的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的三个用途介绍(代码示例)的细致内容,更多请关注 百分百源码网 其它相干文章!