伪元素必须依附于真实html元素才能生效，单独使用::before或::after无效；需声明content属性才渲染，且默认不参与文档流与布局计算，仅适用于装饰性内容。
伪元素必须依附于真实元素才能生效
单独写 ::before 或 ::after 不会渲染任何内容，它们只能作为某个已存在 HTML 元素的伪类附加部分。比如 div::before 合法，但 ::before（无宿主）无效，浏览器直接忽略。
常见错误是试图用伪元素替代结构元素来“撑开”布局，结果发现高度/宽度不响应、无法参与 Flex/Grid 排列——因为伪元素默认是 display: inline，且不占据文档流中的几何位置（除非显式设 position: absolute 或触发 BFC）。
- 若需参与布局计算（如占位、对齐），优先考虑真实标签；伪元素只用于装饰性内容（图标、分隔线、渐变边框等）
- 想让
::after在父容器内撑高？得加content: ""+display: block+ 显式尺寸或清除浮动 - Flex 容器中，伪元素默认不成为 flex item；要让它参与排列，需在宿主上设
display: flex并对伪元素设flex: 0 0 auto等，但兼容性差（Safari 旧版不支持）
content 属性是伪元素的开关和内容源
没有 content 声明，::before 和 ::after 什么都不会渲染，哪怕写了颜色、尺寸也没用。它的值决定内容类型：空字符串 ""、文本、URL 图片、计数器，甚至 attr() 动态取属性值。
button::before {
content: "▶ ";
font-size: 12px;
}
<p>.icon::after {
content: url("arrow.svg");
display: inline-block;
width: 16px;
height: 16px;
}注意：content: url() 加载失败时整个伪元素消失，不会降级显示文字；而 attr(data-label) 在属性不存在时返回空字符串，不是 undefined。
立即学习“前端免费学习笔记（深入）”；
-
content: none是合法值，效果等同于未声明，但可用于 CSS-in-JS 动态控制显隐 - 不能用
content插入 HTML 标签或执行 JS；它纯属 CSS 渲染层行为 - 在打印样式表中，伪元素默认不输出，需显式设
@media print { ... }重定义
定位伪元素做布局辅助时，务必处理文档流干扰
用 position: absolute 把伪元素钉在角落（如气泡角标、装饰性圆点）很常见，但容易忽略它对父容器高度的影响：绝对定位后脱离文档流，父容器可能塌陷，尤其当它是唯一“撑高”元素时。
.badge-container {
position: relative;
/* 若内部只有 .badge-container::after，这里高度可能为 0 */
}
.badge-container::after {
content: "NEW";
position: absolute;
top: -6px;
right: -6px;
background: red;
color: white;
font-size: 10px;
padding: 1px 5px;
}- 解决塌陷：给宿主加
min-height、padding，或插入一个透明占位 - 避免遮挡：伪元素层级默认与宿主相同，需配合
z-index控制（前提是宿主已建立定位上下文） - 响应式错位：用
em或rem替代固定像素值，否则缩放时偏移量失准
伪元素不继承所有父级样式，font 和 color 是例外
伪元素会自动继承宿主的 color、font-family、font-size、line-height 等文本相关属性，但不会继承 width、height、margin、background（除非显式设置）。这常导致“为什么文字变小了但背景没跟上”的困惑。
例如宿主设了 background: #333，伪元素不会自动带这个背景，必须单独写；但宿主设 font-size: 14px，伪元素里不用再声明就能按 14px 渲染文字。
- 继承是单向的：改宿主字体大小，伪元素跟着变；但改伪元素字体大小，不影响宿主
-
inherit关键字在伪元素里仍有效，可用于强制继承某非默认继承属性（如border-color: inherit） - 伪元素无法通过 JavaScript 获取
getComputedStyle中的content值（返回空字符串），这是 CSS 规范限制
伪元素不是布局主力，而是视觉补丁。真正卡住的往往不是怎么写，而是忘了它天生不占地、不传参、不响应事件——这些边界比语法更影响最终效果。
