父元素overflow:hidden导致::after伪元素content:'>'被截断的问题

你当前的代码中，.centered-text设置了overflow:hidden和text-overflow:ellipsis，导致::after伪元素被父元素的溢出裁剪规则截断——即使给伪元素单独设置overflow:visible也无效，因为伪元素是父元素的一部分，父元素的overflow:hidden会裁剪整个元素盒内的所有内容。

解决方案1：通过定位和内边距预留伪元素位置 #

修改CSS代码，给父元素添加内边距腾出伪元素空间，同时将::after绝对定位到父元素右侧：

.centered-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 30vw;
  padding-right: 1em; /* 为右侧伪元素留出足够空间 */
  position: relative;
}

.centered-text::before {
  content: '<'; /* CSS中直接使用字符即可，无需HTML实体转义 */
}

.centered-text::after {
  content: '>';
  position: absolute;
  right: 0;
  top: 0;
}

原理：父元素的padding-right拓展了元素盒模型空间，绝对定位的伪元素会放置在这个预留区域内，不会被overflow:hidden裁剪（overflow:hidden仅裁剪内容区域的溢出部分，内边距区域的内容不受影响）。

解决方案2：嵌套元素分离文本与伪元素 #

通过嵌套span元素，让内层元素负责文本省略，外层元素承载伪元素，从结构上避免伪元素被裁剪：

HTML修改：

<div style="text-align:center;">
  <span style="float:left;">I'm on the left</span>
  <span class="centered-text">
    <span class="text-content">a brown fox jumps over the lazy dog</span>
  </span>
  <span style="float:right;">I'm on the right</span>
</div>

CSS修改：

.centered-text {
  display: inline-block;
}

.text-content {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 30vw;
}

.centered-text::before {
  content: '<';
}

.centered-text::after {
  content: '>';
}

原理：伪元素属于外层.centered-text，而文本省略规则仅作用于内层.text-content，两者的溢出裁剪互不影响，伪元素自然能正常显示在省略号后方。

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