JSFiddle - React, Tailwind, and code Playground
HTML
<div class="required">
<label>Name:</label>
<input type="text" />
</div>
<br>
<br>
<div class="required_option_2">
<label>Name:</label>
<input type="text" />
</div>
CSS
.required {
display: inline-block;
/* constrain the absolutely positioned pseudo */
position: relative;
}
.required label:after {
content:"*";
display: block;
position: absolute;
right: -.6em;
top: 0;
}
.required_option_2 {
display: inline-block;
}
.required_option_2 label {
/* constrain the absolutely positioned pseudo */
position: relative;
/* create some space for the '*' */
margin-right: .4em;
}
.required_option_2 label:after {
content:"*";
display: block;
position: absolute;
right: -.6em;
top: -.1em;
}