使用CSS ::之前和定位在文本后对齐星号

Question

我有一个文本元素。我无法修改该文本。因此，我将尝试通过 CSS:: 修改该文本，然后再使用 content:'test' 样式和position: 绝对样式。在文本元素之后有一个 * 。这个 * 不在文本附近，如何将 * 放在文本后面。

我希望这个 * 靠近测试文本

这是CSS：

.text-wrapper {
  display: inline-flex;
  position: relative;
  width:100%
}

.text::before {
  content: 'test'; 
  position: absolute;
  left: 0;
  background:#fff;
  width:100%
}

.text {
  position: relative;
  padding-right: 10px;
}

.asterisk {
  position: absolute;
  top:0;
  right: 0;  
  margin-left: 5px; 
}

这是 Html：

<label class="text-wrapper">
  <span class="text">Original Text</span>
  <span class="asterisk">*</span>
</label>

这是目前的结果

Answer 1

你把它弄得太复杂了，你可以只添加文本并让它自然地定位在后面（不需要绝对，除非你不希望它占用空间）：

.required::after {
  content: '*';
  padding-inline-start: 0.5ch;
}

<p class="required">Original Text</p>