广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章带大家了解一下CSS中的::before和::after伪元素，看看它们的应用，希望对大家有所帮助！
本文从最简单的开始，解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。
::before和::after是什么?::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。
content属性
1）::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
2）::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空
3）这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容
content可取以下值：
string
使用引号包一段字符串，将会向元素内容中添加字符串
p::before{ content: "《"; color: #000000;}p::after{ content: "》"; color:#000000;}<p>JavaScript高级程序设计</p>登录后复制attr()
通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。
a::after { content: ' → ' attr(href); /* 在 href 前显示一个箭头 */} <a href="https://www.baidu.com/">百度地址</a>登录后复制 a::after{ content: "【" attr(href) "】";}<a href="https://www.baidu.com/">百度地址</a>登录后复制url()/uri()
用于引用媒体文件。比如：“百度”前面给出一张图片，后面给出href属性。
a::before{ content: url("img/baidu_jgylogo3.gif");}a::after{ content:"("attr(href)")";}<a href="https://www.baidu.com/">百度地址</a>登录后复制注意
1）URL不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。
2）content属性，直接使用图片，即使写width,height也无法改变图片大小;
解决方案：如果要解决这个问题，可以把content:''写成空，使用background:url()来添加图片
/*伪元素添加图片：*/.wrap:after{ /*内容置为空*/ content:""; /*设置背景图，并拉伸*/ background:url("img/06.png") no-repeat center; /*必须设置此伪元素display*/ display:inline-block; /*必须设置此伪元素大小（不会被图片撑开）*/ background-size:100%; width:100px; height:100px;}复制代码登录后复制3）苹果端伪元素不生效,img、input和其他的单标签是没有:after和:before伪元素的（在部分浏览器中没有，如:苹果端会发现无效），因为单标签本身不能有子元素。
解决方案：给img包一个div可以解决
4）想要动态改变伪元素的图片，可以给当前元素添加伪元素图片的基础样式，再动态class来写伪元素的图片。
::before和::after的应用配合quotes 属性使用
加括号
h1{ quotes:"(" ")"; /*利用元素的quotes属性指定文字符号*/}h1::before{ content:open-quote;}h1::after{ content:close-quote;}<h1>给标题加括号</h1>登录后复制加引号
h2{ quotes:"\"" "\""; /*添加双引号要转义*/}h2::before{ content:open-quote;}h2::after{ content:close-quote;}<h2>给标题加引号</h2>登录后复制不指定，默认
h3::before{ content:open-quote;}h3::after{ content:close-quote;}<h3>不设置quotes</h3>登录后复制装饰标题
h1 { display: grid; grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr); align-items: center; text-align: center; gap: 40px;}h1::before, h1::after { content: ''; border-top: 6px double;}<h1>标题</h1>登录后复制布局是通过将
<h1>元素变成 3 列来实现的。左列和右列是双线，宽度均为minmax(50px, 1fr)，这意味着它们的匹配宽度始终不小于50px。标题文本整齐地居中居中。
彩带标题
h1 { position: relative; margin: 0 auto 20px; padding: 10px 40px; text-align: center; background-color: #875e46;}h1::before, h1::after { content: ''; width: 80px; height: 100%; background-color: #724b34; /* 定位彩带两端形状的位置，并且放在最底层 */ position: absolute; z-index: -1; top: 20px; /* 彩带两端的形状 */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%); /* 绘制并定位彩带的阴影三角形 */ background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%); background-size: 20px 20px; background-repeat: no-repeat; background-position: bottom right;}h1::before { left: -60px;}h1::after { right: -60px; transform: scaleX(-1); /* 水平翻转 */}--------------------------- <h1>标题</h1>登录后复制实现更逼真的阴影
a::after { content: ' → ' attr(href); /* 在 href 前显示一个箭头 */} <a href="https://www.baidu.com/">百度地址</a>0登录后复制替换内容
有些情况下content可以不使用::before或::after。如果content设置为单个图像，那么你可以直接在元素上使用它来替换该元素的 HTML 内容。
如页面上分别有以下三个内容：
加了replace类之后
a::after { content: ' → ' attr(href); /* 在 href 前显示一个箭头 */} <a href="https://www.baidu.com/">百度地址</a>1登录后复制1)具有简单文本的元素。它会被取代。2)一个包含
<img>在其中的元素。它也会被取代。 3)<img>直接一个元素。Firefox不会取代它，但其他浏览器会。
清除浮动
方式一：
a::after { content: ' → ' attr(href); /* 在 href 前显示一个箭头 */} <a href="https://www.baidu.com/">百度地址</a>2登录后复制方式二：
a::after { content: ' → ' attr(href); /* 在 href 前显示一个箭头 */} <a href="https://www.baidu.com/">百度地址</a>3登录后复制模拟float:center的效果
float没有center这个取值，但是可以通过伪类来模拟实现。
原理：左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。
a::after { content: ' → ' attr(href); /* 在 href 前显示一个箭头 */} <a href="https://www.baidu.com/">百度地址</a>4登录后复制引用参考:
W3C官方文档
Diving into the ::before and ::after Pseudo-Elements
Faking ‘float: center’ with Pseudo Elements
原文地址：https://juejin.cn/post/6986629782666477599
作者：Axjy
相关推荐：《css视频教程》！
以上就是详解CSS中的伪元素::before和::after的详细内容，更多请关注9543建站博客其它相关文章！
发表评论