css的::before和::after伪元素允许在不修改html结构的前提下，在元素内容前后插入虚拟内容，它们必须通过content属性生效，并常用于装饰、布局或生成辅助性内容。1. 它们生成的是渲染树中的匿名行内元素，非真实dom节点，无法通过javascript操作；2. 常见用途包括添加图标、清除浮动、自定义列表序号、插入提示信息等；3. content属性支持文本、unicode字符、图片url、计数器、属性值(attr())等多种类型；4. 适用于视觉装饰、动态生成内容、避免html冗余，但应避免用于语义内容、交互元素、需索引或高可访问性要求的场景。
说起CSS的::before和::after伪元素，它们其实是让你能在不碰HTML代码的前提下，给元素的前面或后面加点料的魔法棒。简单来说，它们允许你在不增加实际DOM节点的情况下，插入额外的视觉内容或辅助样式，就像是给你的HTML元素披上了一层“虚拟”的外衣。
解决方案
::before和::after伪元素是CSS提供的一种非常强大的机制，它们允许你在目标元素内容的前面或后面插入一个“虚拟”的子元素。这两个伪元素最核心的特点是，它们都需要一个content属性才能生效，哪怕content的值是空的字符串（content: "";）。
它们的工作原理是，浏览器在渲染一个元素时，如果检测到这个元素有::before或::after规则，就会在它的内部，但在其原有内容之外，生成一个匿名的行内框。这个匿名的框可以像普通元素一样被赋予样式，比如display、width、height、background、position等等。
立即学习“前端免费学习笔记（深入）”；
常见的应用场景真的非常多：
添加装饰性图标或符号： 比如在链接前加个小箭头，或者在列表项前自定义一个点。清除浮动（clearfix hack）： 这是一个经典的用法，通过在浮动元素容器的::after中清除浮动，避免父元素高度塌陷。自定义列表序号： 结合CSS计数器（counter），可以实现非常灵活的列表编号。创建视觉效果： 比如模拟边框、下划线动画，或者一些复杂的图形。插入提示信息： 比如在必填表单字段后添加一个星号。
举个例子，如果你想在每个段落的开头加一个引号：
p::before { content: "“"; font-size: 1.2em; color: #ccc; margin-right: 5px;}p::after { content: "”"; font-size: 1.2em; color: #ccc; margin-left: 5px;}
它们默认是display: inline;的，但我们经常会把它们设置为display: block;或display: inline-block;来更好地控制它们的尺寸和定位。比如，clearfix通常就需要display: block;。
.clearfix::after { content: ""; display: block; /* 让伪元素变成块级元素 */ clear: both; /* 清除浮动 */}
伪元素与真实DOM元素的区别在哪里？
这是一个我经常被问到的问题，也是理解伪元素精髓的关键。最直接的答案就是：::before和::after生成的“元素”并非真正的DOM节点。它们是CSS渲染层面的产物，存在于渲染树（render tree）中，但你无法通过传统的JavaScript DOM操作方法（比如document.querySelector()）直接选中它们。
这意味着什么呢？我个人觉得，这既是它们的优势，也是它们的局限。
优势在于：
轻量级： 不需要修改HTML结构，减少了HTML的冗余代码，让HTML保持更纯粹的语义。对于一些纯粹的视觉效果或装饰性内容，这简直是福音。样式与结构分离： 把一些原本可能需要额外或标签才能实现的效果，完全交由CSS处理，让结构层更干净。
局限性嘛，也有：
不可交互： 因为它们不是真实的DOM节点，你不能直接给它们添加事件监听器（比如click事件）。如果你的“内容”需要被点击、被选中或者参与到JavaScript的交互逻辑中，那么伪元素就不是合适的选择。可访问性挑战： 屏幕阅读器对伪元素content属性生成的内容处理方式不一。对于纯粹的装饰性内容，这通常不是问题。但如果content里的文本对用户理解页面内容至关重要，那最好还是把这段文本放到HTML里。你总不能指望屏幕阅读器能完美地“读出”一个装饰性的星号吧？
总而言之，你可以把伪元素想象成是“CSS自己创造出来的、只为美观或辅助布局而生的小帮手”。它们活在CSS的世界里，不直接参与到DOM的“政治斗争”中。
掌握content属性：除了文本还能插入什么？
content属性是伪元素的灵魂，没有它，伪元素就无法存在。但你可能以为它只能插入一些简单的文本字符串，那可就小瞧它了。content属性的能力远比你想象的要丰富。
除了最常见的文本字符串（比如content: "你好世界";），content属性还能接受以下几种类型的值：
Unicode 字符： 这是插入特殊符号、图标（如果使用字体图标）的常用方式。比如，插入一个项目符号：
li::before { content: "\2022 "; /* Unicode编码的圆点 */ color: blue; margin-right: 5px;}
或者使用字体图标（比如Font Awesome）：
.icon-user::before { font-family: "Font Awesome 5 Free"; content: "\f007"; /* Font Awesome中用户图标的Unicode */}
URL (图像)： 你可以直接插入一张图片。不过说实话，我个人觉得这个用法相对少见，或者说，它有其局限性。通常我们更倾向于用background-image来处理背景图，因为它在定位、尺寸控制上更灵活。但如果你需要一个作为“内容”插入的小图标，这也不失为一种选择。
.item::before { content: url('path/to/icon.png'); /* 注意：这里无法直接控制图片大小，需要图片本身尺寸合适 */}
这里有个坑，就是你没法直接通过CSS来调整这张图片的大小，它会以原始尺寸显示。所以，如果用图片，通常是小图标，且尺寸需要提前处理好。
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情 
计数器（Counters）： 这是实现自定义列表序号或章节编号的利器。通过counter-reset和counter-increment来创建和递增计数器，然后用counter()或counters()函数在content中显示。
body { counter-reset: chapter; /* 重置名为chapter的计数器 */}h2::before { counter-increment: chapter; /* 每次遇到h2，chapter计数器加1 */ content: "第 " counter(chapter) " 章： ";}
这个功能在生成目录或论文编号时特别有用，让内容结构化变得非常方便。
属性值（attr()）： 你可以获取HTML元素的某个属性值并将其作为内容插入。这在制作工具提示（tooltip）或者显示数据属性时特别方便。
鼠标悬停
span[data-tooltip]::after { content: attr(data-tooltip); /* 获取data-tooltip属性的值 */ background-color: black; color: white; padding: 5px; border-radius: 3px; /* ...其他定位和显示样式 */}
none 或 normal： none会移除伪元素，normal则表示使用默认值（通常是空字符串，但具体行为取决于上下文）。
所以，content属性远不止是插入文本那么简单，它是一个多功能的工具，能够根据你的需求插入各种类型的内容，极大地扩展了伪元素的用途。
什么时候应该用伪元素，什么时候又该避免？
这个问题很重要，它关系到你代码的健壮性、可维护性和可访问性。作为开发者，我们总希望用最合适的技术解决问题。
你应该考虑使用伪元素的情况：
纯粹的视觉装饰： 当你想要添加的元素仅仅是为了美观，不承载任何语义信息，也不需要用户与之交互时，伪元素是理想选择。比如，一个箭头、一个分隔符、一个自定义的边框样式，或者一些纯粹的背景图案。
/* 比如，给一个链接添加一个外部链接的图标 */a[target="_blank"]::after { content: "\f35d"; /* Font Awesome的外部链接图标 */ font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 5px;}
这种情况下，图标是辅助性的，即使没有它，链接的功能和语义也完全不受影响。
CSS生成的内容： 比如前面提到的计数器，或者通过attr()获取属性值来显示信息。这些内容是基于CSS或HTML属性动态生成的，用伪元素非常自然。
避免HTML结构冗余： 如果为了一个很小的视觉效果，你需要在HTML里塞一堆空的或标签，那简直是灾难。伪元素可以帮你保持HTML的简洁和语义化。经典的clearfix就是为了避免在HTML里添加一个空的div。
实现某些特定的设计模式： 比如一些复杂的下划线动画、气泡对话框的尖角、自定义的复选框/单选按钮样式（通过隐藏原生input，然后用伪元素来模拟其视觉状态），伪元素都能提供非常灵活的解决方案。
但话说回来，有些时候，伪元素并非最佳选择，甚至应该避免：
内容具有语义或交互性： 如果你想要插入的内容是页面信息的重要组成部分，或者用户需要与它进行交互（比如点击、复制、选择），那么它就应该是一个真实的HTML元素。
错误示例： 用::after来插入一个“阅读更多”的链接文本。这绝对是错的，因为“阅读更多”是可点击的，而且是内容的一部分。正确做法： 链接本身是标签，伪元素可以用来给链接加个小图标。
内容需要被搜索引擎索引： 虽然现代搜索引擎对CSS的解析能力越来越强，但对于content属性生成的内容，其索引效果不如直接在HTML中出现的内容那么稳定和可靠。重要的文本内容，务必放在HTML里。
可访问性是首要考量： 如果你插入的文本或图像对视觉障碍用户理解页面至关重要，那么将其放在HTML中，并确保有适当的ARIA属性来增强可访问性，才是正确的做法。伪元素生成的内容，屏幕阅读器可能会忽略。
过度复杂化： 伪元素虽然强大，但如果滥用，可能会让你的CSS变得难以理解和维护。有时候，一个简单的HTML元素加上CSS样式，反而更清晰直观。
简单来说，伪元素是CSS的“装饰品”和“辅助工具”，而非“核心内容承载者”。用得好，它能让你的代码更优雅；用不好，可能会挖坑。所以，在使用前多想一步，这个内容真的适合用伪元素吗？它会不会影响到页面的语义、交互或可访问性？
以上就是CSS ::before和::after伪元素：内容插入技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1102728.html
微信扫一扫 
支付宝扫一扫 
