伪元素 :after 和 overflow hidden

Question

我有这个标记：

label.required:after {
  content: ' *';
  color: red;
}

<label class="required">please enter your username</label>

我想使用 text-overflow: ellipsis 来处理文本过长的标签，就像这样：

label {
  display: inline-block;
  max-width: 150px;
}

label.required:after {
  content: ' *';
  color: red;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<label class="required ellipsis">please enter your username</label>

问题是:after伪元素也被截断了，因此没有*显示。

我希望标签看起来像这样（显示:after伪元素）：

please enter your us... *

可以吗？

- danday74

Answer 1

是的，这是可能的。通过将标签 position: relative 和伪元素的位置设置为 absolute。

label {
  position: relative;
  display: inline-block;
  max-width: 150px;
}

label.required:after {
  content: '*';
  color: red;
  position: absolute;
  right: 0;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<label class="required ellipsis">please enter your username</label>

- tom

---

太棒了！一旦系统允许，我会立即接受。 - danday74

或者对于:after，不需要改变伪元素。 - Temani Afif

@TemaniAfif 你是对的。然而，对于标签来说，position: relative; 是必需的。 - tom

猜想你在这里无法绕过js。你需要检查省略号是否被应用，而这并不是css的真正强项。 - tom

这回答了问题。谢谢接受。然而，如果没有溢出，*的定位稍有偏差。我已经在这个新问题上提了一个新问题 - https://stackoverflow.com/questions/76884295/pseudo-element-after-and-ellipsis - danday74

好的，谢谢 @ztom 的帮助 :) - danday74