Aligning an Asterisk After Text Using CSS ::before and Positioning

I have one text element. I cannot modify that text. So I will try to modify that text via CSS::before using the style of content:’test’ like this and position: absolute styles. after the text element it has one <span>*</span> . this * was not near the text how do place the * to after the text.

I want this * to be near the test Text

Here is the 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; 
}

Here is the Html:

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

This is the result that currently have

You need to sign in to view this answers