解决CSS ::after伪元素文本重叠：实现单词翻译无重叠排列

希望在文本的每个单词下方显示对应的翻译，尝试通过::after伪元素展示翻译内容，但当翻译文本长于原单词时会出现重叠。现有代码如下：

现有CSS代码 #

.word {
    position: relative;
    white-space: pre-line;
    line-height: 60px;
    display: inline;
}
.word::after {
    content: attr(disp);
    position: absolute;
    font-style: italic;
    top: 5px;
    left: 0;
    font-size: 80%;
}

现有HTML代码 #

<div>
  <span class="word" disp="tr1">word1 </span>
  <span class="word" disp="tr2">word2 </span>
  <span class="word" disp="translated3">word3 </span>
  <span class="word" disp="translated4">word4
 </span>
  <span class="word" disp="tr5">word5 </span>
  <span class="word" disp="tr6">word6 </span>
</div>

需求：让每个“原词+翻译”模块不与前一个重叠，且模块间无额外边距、无需统一模块尺寸。

修改CSS样式，核心是让每个单词模块的宽度自动适配原词和翻译中较宽的内容，同时让翻译自然换行到原词下方，具体代码如下：

修改后的CSS代码 #

/* 父容器消除inline-block元素间的默认间距 */
.word-container {
    font-size: 0;
}

.word {
    position: relative;
    display: inline-block; /* 改为inline-block，让元素宽度由内容决定 */
    vertical-align: top; /* 对齐顶部，避免错位 */
    font-size: 16px; /* 恢复字体大小 */
    margin: 0; /* 确保无额外边距 */
    text-align: center; /* 可选：让原词和翻译居中对齐，视觉更美观 */
}

.word::after {
    content: attr(disp);
    display: block; /* 改为block，让翻译换行到原词下方 */
    font-style: italic;
    font-size: 80%;
    margin-top: 4px; /* 调整原词和翻译的间距 */
}

修改后的HTML代码 #

<div class="word-container">
  <span class="word" disp="tr1">word1</span>
  <span class="word" disp="tr2">word2</span>
  <span class="word" disp="translated3">word3</span>
  <span class="word" disp="translated4">word4</span>
  <span class="word" disp="tr5">word5</span>
  <span class="word" disp="tr6">word6</span>
</div>

关键修改说明 #

• 将.word的display从inline改为inline-block：让每个单词模块成为独立的块级容器，宽度自动适配原词和翻译中较宽的内容，避免重叠。
• 给父容器添加font-size: 0，再给.word恢复字体大小：消除inline-block元素之间默认的空白间距，满足“模块间无额外边距”的需求。
• 将::after伪元素的position: absolute移除，改为display: block：让翻译文本自然换行到原词下方，同时让父容器的宽度考虑翻译的宽度，彻底解决重叠问题。
• 可选添加text-align: center：让原词和翻译居中对齐，提升视觉一致性，不影响核心需求。

内容的提问来源于stack exchange，提问作者NoDescription