::before 和 ::after 的核心区别仅在于插入位置：前者在元素内容前，后者在内容后；其余语法、能力、限制完全一致。
::before 和 ::after 的核心区别，只在插入位置：一个在元素内容之前，一个在之后。它们语法、能力、限制几乎完全一致，不是“功能不同”，而是“时机不同”。
插入位置：content 出现在哪？
这是唯一本质区别。::before 插入到元素的 textContent 开头前；::after 插入到 textContent 结尾后 —— 注意，是内容内部，不是 HTML 标签外部。
例如：
p::before { content: "【"; }
p::after { content: "】"; }
<p>Hello</p>
渲染效果等价于 <p>【Hello】</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，而不是 【<p>Hello</p>】。
常见误判点：
- 对空元素（如
<img>、<br>）用 ::before/::after 是有效的，但 content 不会“包裹”它，只是出现在其内容逻辑位置（即标签内开头或结尾）； -
<input>等替换元素不支持 ::before/::after（浏览器忽略），因为它们没有可插入的“内容流”； - 伪元素不会影响
:first-child或:last-child的计算，它们不在 DOM 中。
content 值写法完全一样，但语义常不同
两者都必须声明 content，值类型完全互通：string、attr()、url()、open-quote 等均可混用。但实际使用中倾向有分工：
- ::before 多用于前置图标、装饰符号、左引号、序号标记（如
content: counter(item) ". "）； - ::after 多用于后缀符号、右引号、清除浮动（
content: ""+clear: both）、链接跳转提示（content: " → " attr(href)）； - 用
attr()时，::before 常读取data-prefix，::after 读取data-suffix，纯属约定，非强制。
样式控制能力无差别，但布局行为需注意
两者默认都是 display: inline，都可以设 block、flex、absolute 等，都能加背景、边框、动画。但容易踩的坑是：
- 若父容器未设
position: relative，而子伪元素用position: absolute，它会相对于最近的定位祖先定位，不是相对于宿主元素 —— 这点 ::before 和 ::after 行为一致，但新手常以为“伪元素天然绑定宿主”； - 用
url()插入图片时，无法直接缩放（width/height无效），必须改用content: ""+background方案； - 伪元素不继承字体（font-family 等需显式设置），尤其当宿主是
<button></button>或<input>时容易漏掉。
真正复杂的地方从来不是“哪个该用”，而是：是否真需要伪元素？能否被更语义化的 HTML 替代？比如用 <span class="icon"></span> 显式承载图标，比依赖 ::before 更利于可访问性与 SSR 渲染一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
