How to add red dot at top-right corner of required html input label just like asterisk?

Question

I want to add dot in place of asterisk in html label of required input.It should be in top-right corner just like asterisk.

Answer 1

For the required attribute in the input element to affect the label, the label must come after the input element.

This snippet adds a small red circle at the end of the label by using a pseudo after element on the label when the input has the required attribute (using CSS attribute selector facility).

 label { position: relative; } input[required]+label::after { content: ''; width: 10px; height: 10px; top: -5px; border-radius: 50%; position: relative; background: red; display: inline-block; }

 <input required><label>I am the label</label>

Note that if you want the layout to be different, eg the label before or on top of the input, then there will have to be further positioning undertaken.

Answer 2

you should use before or after as u needed.

label.required:before {
    content: ". ";
}