在css3中，通过 ::after 伪元素构建自适应文本两端对齐的核心做法是：将容器设为弹性布局（flexbox），让文本占据剩余空间，而 ::after 作为弹性项目自动填充剩余宽度。具体而言，父容器需设置 display: flex 和 justify-content: space-between，文本节点设为 flex: 1，::after 设为 content: "" 且同样 flex: 1。这样当文本较短时，::after 会拉伸以填满容器右侧，实现视觉上的两端对齐；若文本占满容器，则 ::after 宽度为零，不影响布局。
如何确保 ::after 不破坏原有文本流？
通过将 ::after 纳入 Flex 容器而非绝对定位，可避免脱离文档流导致的重叠或高度塌陷问题。关键在于父容器必须显式声明 display: flex，否则 ::after 的 flex 属性无效。同时，文本内容不应包裹在额外块级元素内，否则需调整选择器指向实际文本节点。
/* HTML结构 */
<div class="text-container">
<span class="text">Hello World</span>
</div>
/* CSS样式 */
.text-container {
display: flex;
justify-content: space-between;
width: 100%;
}
.text {
flex: 1;
}
.text::after {
content: "";
flex: 1;
}
上述代码中，.text-container 为 Flex 容器，.text 和 ::after 均为其子项。当视口宽度变化时，::after 动态调整宽度以保持两端对齐。注意：::after 默认不可见，因其无背景色或边框，仅占位。
当文本长度超过容器宽度时会发生什么？
若文本长度超出容器可用空间，::after 仍会尝试填充剩余宽度，但文本可能换行或溢出。此时两端对齐失效，因为 Flex 布局优先保证内容可见性。解决方案是限制容器最大宽度或启用文本截断，例如添加 max-width: 100% 和 overflow: hidden 到 .text 上。
.text {
flex: 1;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
此修改后，长文本将被截断并显示省略号，::after 不再拉伸，布局保持稳定。验证方法：在浏览器开发者工具中调整容器宽度，观察 ::after 宽度变化及文本行为。
基于输入条件 width: 50% 的具体结果是什么？
当容器宽度设置为 50% 时，::after 的对齐效果取决于父容器的实际像素宽度。若父容器宽 800px，则当前容器宽 400px。假设文本内容为 "Short"，其渲染宽度约 30px，则 ::after 宽度为 370px，实现两端对齐。若文本为 "Very Long Text That Exceeds Container", 则文本换行，::after 宽度压缩至零，对齐失效。关键条件是：文本未触发换行时，::after 严格填充剩余空间；一旦换行，Flex 布局重新分配空间，::after 失去作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
