content本身不参与盒模型计算，真正影响布局的是::before/::after伪元素——它们作为独立盒参与渲染流，其width/height/padding/margin等样式独立生效，与宿主元素解耦。
它根本不计入盒模型 —— 这个前提错了。 content 生成的内容既不进入 DOM，也不参与盒模型尺寸计算（width/height、padding、border 都不受影响），但它会占据渲染流中的空间，所以「看起来像占位」，实际是伪元素自身在布局。
伪元素 ::before/::after 才是真正的盒模型载体
很多人误以为 content 值本身“撑开”了盒子，其实是 ::before 或 ::after 这个伪元素被创建后，作为一个**独立的、匿名的块级或行内盒**参与布局。它的盒模型行为完全独立于宿主元素：
-
content只是这个伪元素的「内容值」，不是盒子本身 - 伪元素默认是
display: inline，但可以显式设为block、flex等，从而拥有自己的width/height/padding - 伪元素的 margin/padding/border 全部生效，且会影响其所在行或容器的布局流
为什么 content 插入文字后元素“变宽”了？
这不是 content 在撑盒子，而是伪元素在行内上下文中产生了「行内盒宽度」：
- 例如
p::after { content: " →"; }，这个箭头作为行内文本，和段落文字一起参与行高、文字流、换行判断 - 如果父元素是
white-space: nowrap，它可能把整行拉长；如果是flex容器，它会作为 flex item 占据主轴空间 - 想让它不占空间？加
position: absolute或visibility: hidden—— 但这时content依然渲染，只是脱离布局流
content 为空字符串时，伪元素还存在吗？
存在，而且有盒模型行为：
-
div::before { content: ""; }创建了一个空的伪元素，它默认是display: inline，高度由line-height决定，宽度为 0 - 一旦加上
display: block; width: 20px; height: 20px; background: red;，它就变成一个标准块盒，尺寸完全由这些样式控制，和content值无关 - 哪怕
content: none（非法值）或没写content，伪元素根本不会渲染 ——content是伪元素存在的必要条件
真正容易被忽略的是：伪元素的盒模型和宿主元素完全解耦，它没有继承 box-sizing，也没有共享 font-size（除非显式设置）。你调样式时，得把它当成一个独立元素来对待，而不是“content 居然能改变父元素尺寸”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
