::after伪元素无法实现真正的交互式展开/收起，仅能静态插入文字；需结合HTML结构变化（如checkbox）或JavaScript才能实现点击切换功能。
可以用 ::after 伪元素配合 CSS 控制段落的“展开/收起”效果，但要注意：纯 CSS 无法真正切换状态（比如点击后展开），::after 只能静态插入文字。要实现交互式“展开”，必须结合 HTML 结构变化（如加 class）或 JavaScript。下面分两种常见场景说明：
仅用 CSS + ::after 显示静态“展开”提示（无交互）
适合仅作视觉提示、不需点击展开的场景。例如默认截断文本，后面固定显示“展开”二字：
- 给段落设置
line-clamp或固定高度+overflow: hidden - 用
::after在末尾插入“展开”文案 - 注意：此时“展开”只是装饰，不带功能
示例代码：
p.truncated {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
}
p.truncated::after {
content: " 展开";
color: #007bff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
background: white; /* 遮盖被截断的文字边缘 */
padding-left: 4px;
}用 checkbox + label 模拟点击展开（纯 CSS 交互）
无需 JS，利用隐藏 checkbox 的:checked 状态控制显示。这是最接近“纯 CSS 实现展开”的可靠方案：
立即学习“前端免费学习笔记（深入）”；
- 把段落内容包在
里，关联一个隐藏 - 默认只显示前几行，用
::before或::after插入“展开” - 当 checkbox 被勾选（即 label 被点击），用
input:checked ~ p选择器移除截断样式
关键点：伪元素文案可随状态变化，比如展开后变成“收起”：
input[type="checkbox"] { display: none; }
p.content { line-clamp: 2; overflow: hidden; }
input:checked ~ p.content { line-clamp: unset; }
input:not(:checked) + label::after { content: " 展开"; color: #007bff; }
input:checked + label::after { content: " 收起"; color: #666; }真实项目中更推荐 JS 配合 ::after（灵活可控）
如果需要响应点击、动画、异步加载等内容，CSS 方案会受限。建议：
- 保留
::after插入文案，保持样式统一 - 用 JS 切换类名（如
.is-expanded），CSS 控制显隐和文案 - 这样伪元素文案可动态变化，且逻辑清晰、易维护
例如：
p.text::after {
content: " 展开";
color: #007bff;
cursor: pointer;
}
p.text.is-expanded::after {
content: " 收起";
}
p.text.is-expanded {
line-clamp: none;
height: auto;
}基本上就这些。记住：::after 本身不处理交互，它只是“画字”的工具；真正的展开逻辑，得靠结构变化或脚本驱动。
