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
Leave feedback about this