登录  /  注册
首页 > web前端 > css教程 > 正文

css伪元素::before和::after的三个用法介绍(代码示例)

不言
发布: 2018-11-02 16:05:04
原创
2607人浏览过

本篇文章给大家分享一篇关于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的三个用法介绍(代码示例)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号