使用::after伪元素和content属性可为段落末尾添加装饰性符号，如星号、引号或箭头，无需修改HTML。通过设定content内容、颜色、字体大小等样式，实现视觉点缀；结合类选择器限定应用范围，避免冗余显示；支持Unicode字符或字体图标，提升页面细节表现力。
在CSS中为段落末尾添加装饰性符号，可以通过::after伪元素结合content属性来实现。这种方法无需修改HTML结构，仅用CSS即可动态插入符号，比如引号、星号、箭头或其他图形。
使用 ::after 和 content 插入符号
::after 伪元素允许你在选定元素的内容之后插入生成的内容，而 content 属性则定义要插入的具体内容。
例如，为所有 p 段落末尾添加一个装饰性星号（★）：
p::after {
content: " ★";
color: #ff6b6b;
font-size: 0.9em;
}
这样每个段落的结尾都会自动显示一个红色的小星号，起到视觉点缀的作用。
立即学习“前端免费学习笔记（深入）”；
控制显示条件与样式
为了避免不必要的符号出现在标题、空段落或特定元素后，可以添加限制条件：
- 使用类选择器限定范围，如
.decorated::after，只对需要装饰的段落生效 - 通过
content: none或移除::after规则排除特殊元素 - 配合
white-space确保符号前有适当空隙
示例：只为带有 .quote 类的段落添加右引号
p.quote::after {
content: " »";
color: #888;
margin-left: 0.3em;
}
插入图标或特殊字符
除了文字符号，还可以使用Unicode字符或字体图标：
-
content: "\272A"显示一个装饰圆点（❧） -
content: "➤"添加一个箭头符号 - 结合字体库（如Font Awesome），通过伪元素插入图标（需设置字体）
注意编码格式，某些Unicode需以反斜杠转义形式书写。
基本上就这些。利用 ::after 和 content，你可以灵活地为段落末尾添加各种装饰性符号，提升页面细节表现力，同时保持代码简洁。
