::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 实现展开”的可靠方案：
立即学习 “ 前端免费学习笔记（深入）”；
- 把段落内容包在
<label></label>里，关联一个隐藏<input type="checkbox"> - 默认只显示前几行，用
::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 本身不处理交互，它只是“画字”的 工具；真正的展开逻辑，得靠结构变化或脚本驱动。
