必须设置content属性才能渲染，常见错误是遗漏；需注意display、vertical-align、定位、可访问性及字体继承问题。
用 ::after 伪元素加装饰，别硬塞图片或空格
直接在段落末尾加小图标、分隔线或手写体符号，最干净的方式是 CSS 的 ::after。HTML 里不用改结构，也不用反复贴 或 <img>——那些容易错位、缩放失真，还污染语义。
常见错误是把装饰写成独立的 <span></span> 或用 拼凑，结果响应式一缩就跑偏，或者屏幕阅读器误读为内容。
- 装饰必须用
content属性注入，比如content: "•";或content: url(./dot.svg); - 务必设
display: inline-block或inline，否则 SVG 图标可能换行 - 用
vertical-align: middle对齐文字基线，避免悬浮或下沉 - 别忘了加
margin-left（不是margin-right），不然会紧贴文字末尾，挤得难看
选什么符号？优先用 Unicode 或内联 SVG
Unicode 符号轻量、兼容好，比如 »、❧、⋯；SVG 更可控，适合自定义形状（如羽毛、墨水滴）。别用字体图标（如 Font Awesome 的 fa-ellipsis），它依赖额外 CSS 加载，首屏可能闪白或缺失。
实操建议：
- 查 Unicode-table.com 找符号，复制粘贴进
content，例如content: "❧"; - SVG 贴内联：用
content: url("data:image/svg+xml,%3Csvg...%3C/svg%3E");，避免 HTTP 请求 - 慎用
font-family指定装饰字体——不同系统渲染差异大，Segoe UI Symbol在 macOS 上根本没这个字
控制显示范围：只对特定段落生效
全局给所有 <p></p> 加装饰会很乱，比如引文、列表项、说明文字都不该有。必须精准限定。
推荐做法：
- 加 class 控制，比如
<p class="decorated">...</p>，然后写p.decorated::after - 用属性选择器区分场景：
p[role="note"]::after或p:not(.no-deco)::after - 避免用
:last-child——如果段落后面跟着<hr>或标题，它就不是最后一个子元素了，规则失效 - 移动端要重置：用
@media (max-width: 768px)把content设为空，小屏留白比装饰更重要
调试时注意三个隐形坑
装饰不显示？大概率卡在这三处：
-
content值为空字符串或纯空格（content: " "）——浏览器忽略，必须至少一个可见字符或 URL - 父元素设置了
overflow: hidden，而装饰用了transform或负margin往外撑，直接被裁掉 - 用了
position: absolute却没给父元素设position: relative，导致定位基准错乱，飘到页面左上角
最稳妥的起步写法就是纯 inline + margin + vertical-align，先让符号稳稳坐在文字右边，再叠加上色、旋转或动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
