::after无法智能判断内容是否溢出，故“阅读全文”需JS检测scrollHeight>clientHeight后动态控制显示；伪元素不可点击，应使用真实元素配合::after装饰。
为什么::after在文章末尾加“阅读全文”常常不显示
直接给p或article加::after，大概率什么也不出现——因为::after默认是display: inline，而如果目标元素是块级且内部没有内容（比如空标签、或被overflow: hidden裁切）、或者设置了content: ""却没指定其他样式，它就不可见。
更常见的情况是：你希望只在「内容被截断」时才显示“阅读全文”，但::after无法感知文字是否溢出，它无条件渲染。所以实际中必须配合 JS 判断，CSS 单独做不到“智能触发”。
实操建议：
-
::after适合用于「固定位置+固定展示」的提示，比如所有文章末尾统一加一行小字，不区分是否截断 - 若需「仅当内容超长时显示」，必须用 JS 检测
scrollHeight > clientHeight，再动态添加类名，再由该类名控制::after可见性 - 避免对
height: 100px; overflow: hidden这种容器直接加::after——伪元素不会出现在裁剪区域外，它仍属于该元素的盒模型内
content里写文字还是用attr()？
写死文字最简单：content: "阅读全文";；但若想复用样式、让文案可配置（比如多语言），可用attr(data-more)从 HTML 属性读取：
article[data-more="查看更多"]::after {
content: attr(data-more);
display: block;
margin-top: 1em;
color: #007bff;
font-size: 0.9em;
}
注意点：
-
attr()只能读取字符串属性值，不能执行表达式或 fallback - HTML 中必须显式写上属性：
<article data-more="查看更多">...</article>，否则attr()返回空字符串 - 不要用
attr(title)之类语义不相关的属性，容易和辅助技术冲突
如何让“阅读全文”真正 clickable 且不破坏语义
::after生成的内容默认不可聚焦、不可点击、不进 tab 顺序——它不是 DOM 节点。所以光靠 CSS 无法实现跳转或事件绑定。
正确做法是：保留一个真实<a></a>或<button></button>元素，用 CSS 控制其样式，再用::after仅作装饰（比如加个箭头）：
<p class="excerpt">这是一段摘要...</p>
<a href="/post/123" class="read-more">阅读全文</a>
.read-more::after {
content: " →";
margin-left: 4px;
}
这样既保证可访问性（屏幕阅读器能读、键盘可 focus），又满足视觉需求。强行用::after模拟按钮只会埋下兼容性和维护隐患。
移动端适配与行高错位问题
在 iOS Safari 或某些安卓 WebView 中，::after常因line-height、vertical-align或字体度量差异，导致文字下沉或贴顶，看起来像“没对齐”。
稳定方案：
- 给
::after显式设display: inline-block+vertical-align: middle - 避免依赖父元素
line-height，改用padding或margin控制间距 - 在
::after里用font-family: -apple-system, BlinkMacSystemFont, sans-serif保持字体一致，防止系统字体替换后高度突变
真正在意体验的话，“阅读全文”这类交互节点，别省那几行 HTML —— 用真实元素，比调一百遍::after的 baseline 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
