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

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.

CodePudding user response：

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, e.g. the label before or on top of the input, then there will have to be further positioning undertaken.

CodePudding user response：

you should use before or after as u needed.

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