[CSS] input에 ::before, ::after가 적용되지 않는 이유

input 요소에서는 ::before, ::after와 같은 가상요소가 적용되지 않는다.
왜냐하면, 일반적으로 가상요소는 요소의 콘텐츠를 추가하거나 변경하는데 사용되는데 input 요소는 사용자가 직접 상호작용하는 폼 요소로 텍스트나 추가적인 콘텐츠를 포함하지 않기 때문이다.

해결 방법

• input 요소의 스타일을 조정하기 위해서는 해당 요소를 감싸는 다른 div나 label 등의 요소를 사용하여 그 요소에 ::before, ::after를 적용하는 방법이 있다.
• input에 직접적으로 스타일을 변경하기 위해서는 border, background, box-shadow, padding 등의 다른 CSS 속성을 사용하여 디자인을 수정하여야 한다.

예시

<label>
  Username
  <input type="text" />
</label>

<style>
  label::before {
    content: "🔒";
    margin-right: 5px;
  }

  input {
    padding-left: 25px;
  }
</style>

위와 같이 label에 ::before를 사용하여 아이콘을 추가하고, input의 padding-left로 공간을 만들어줄 수 있다.