[css] CSS를 사용하여 ‘필수 필드’별표를 자동으로 추가하여 입력 구성

이 코드가 원하는대로 작동하지 않는다는 불행한 사실을 극복하는 좋은 방법은 무엇입니까?

<div class="required">
    <label>Name:</label>
    <input type="text">
</div>

<style>
    .required input:after { content:"*"; }
</style>

완벽한 세계에서, 모든 필수 input는 필드가 필요하다는 것을 나타내는 작은 별표를 얻을 것입니다. CSS는 요소 자체 다음이 아닌 요소 내용 뒤에 삽입되므로 불가능합니다. 필수 필드 수천 개의 사이트에, 나는 (한 줄에 하나의 변화에 입력 앞에 별표를 이동할 수 :after로 :before) 아니면 라벨 (의 끝 부분으로 이동할 수 .required label:after라벨의 앞에, 또는에) 또는 보관함의 위치 등

별표를 어디에 두어야하는지에 대한 생각이 바뀌었을 때뿐만 아니라 양식 레이아웃이 별표를 표준 위치로 허용하지 않는 이상한 경우에도 중요합니다. 또한 양식을 확인하거나 잘못 완료된 컨트롤을 강조 표시하는 유효성 검사와도 잘 어울립니다.

마지막으로 추가 마크 업을 추가하지 않습니다.

불가능한 코드의 장점을 전부 또는 대부분 가진 좋은 솔루션이 있습니까?

답변

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

.required:after {
  content:" *";
  color: red;
}

<label class="required">Name:</label>
<input type="text">

.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

.required input {
   padding-right: 25px;
   background-image: url(...);
   background-position: right top;
}

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px -20px; 
font-size: xx-large; 
padding: 0 5px 0 0; }

 <form>
    <div>              
        <input type="text" size="15" />                                 
        <span class="asterisk_input">  </span>            
    </div>            
</form> 

.form-group.required .control-label:after {content:"*";color:red;}

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>

input[required]{
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
}

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}