css伪元素::before和::after怎么使用

这篇文章主要介绍“css伪元素::before和::after怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css伪元素::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在线手册。
　　为容器添加有趣的“边框”
　　在HoudiniPaintAPI访问所有浏览器之前，您可能会觉得您的元素非常无聊。但使用简单的CSS和::before和::after，您可以为所有浏览器带来一些更有趣的效果。
　　.related-article{
　　padding:20px;
　　position:relative;
　　background-image:linear-gradient(120deg,#eaee44,#33d0ff);
　　}
　　.related-article*{
　　position:relative;//Setstackingcontexttokeepcontentontopofthebackground
　　}
　　.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伪元素::before和::after怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。