Add a star after labels when input has 'required' attribute - css

Question

<div class="form-group">
<label for="Description">"Description"</label>
<input type="text" id="Description" class="form-control"
[(ngModel)]="description" name="Description"
required />
</div>
Is there anyway to add a star (*) after label( label::after) without changing anything in the code by just adding CSS selector? AFAIK there is no support for previous css selector (has) so I cannot use something like:
label:has(+ input:required)::after {
content:" *";
}

Answer 1

No.
Via CSS-only there is no way to achieve the result without changing markup or javascript in the code unless
1) label and input are in the same line, side by side and
2) the background is a solid color
as in the example below, so you could cheat by always adding the star, but if the sibling input is not [required] then cover the star using a box-shadow.
input { border: 1px #ccc solid }
label::after {
content: "*";
width: 1.5em;
margin-right: 1.5em;
}
label + input:not([required]) {
box-shadow: -3.2em 0 0 #fff;
}
<label>Username</label>
<input name='username' required />
<br /><br />
<label>Username</label>
<input name='username' />
But I'd suggest to at least revert the order of the elements in the markup (and showing them in the right order with display:flex and flex-direction: row-reverse)

Answer 2

If you are fine with adding a div around your every label and input group, then below approach can help you.
input {
border: 1px #ccc solid
}
input[required]+label::after {
content: "*";
color: red;
width: 1.5em;
margin-right: 1.5em;
}
.form-group {
display: flex;
}
.form-group label {
order: -1;
width: 100px;
}
<div class="form-group">
<input name='username' required />
<label>Username</label>
</div>
<br /><br />
<div class="form-group">
<input name='username' />
<label>Username</label>
</div>

Answer 3

The correct selector would be
.form-group:has(:required) label
But, alas, as the :has pseudo class is CSS Selectors Level 4 and has no browser support at all.
You can use it with jQuery though:
jQuery($ => {
$('.form-group:has(:required) label').each((i,el) => {console.log(el); el.classList.add('required')})
})
label.required:after {
content: ' *';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="Description"><span>Description</span></label>
<input type="text" id="Description" class="form-control"
name="Description"
required />
</div>
Since you seem to use angular, this might get a little tricky. I don't know, if there is something like this in Angular.