가상 요소 셀렉터로 신규 등록 게시물 NEW 표시하기

가상요소 셀렉터

가상 요소란?

가상 요소란 HTML에 정의도지ㅣ 않은 요소를 CSS로 새롭게 만들어낸 요소다.

가상 요소 사용법

CSS에서 태그, 클래스, ID 셀렉터 뒤에 ::before , ::after 를 붙여 content 속성과 조합한 후 가상 요소를 만든다. content 속성에는 해당 위치에 넣고 싶은 텍스트나 이미지 등 콘텐츠를 적는다. content 속성으로 표시한 텍스트는 선택 및 복사 붙여넣기를 할 수 없다. 즉, 스크롤이 안 된다. 스크롤을 지원해야 한다면 가상요소 콘텐트 대신 HTML 텍스트를 사용해야 한다.

before와 after

::before 는 요소 앞에, ::after는 요소 뒤에 가상 요소를 삽입한다.

가상 요소 셀렉터로 신규 등록 게시물 NEW 표시하기

HTML

<ul>
    <li class="new">가상요소 셀렉터로 신규 게시물 new 만들기</li>
  <li>HTML/CSS 기초</li>
  <li>CSS는 어렵다.</li>
  <li>마크업</li>
</ul>

CSS

body {
  line-height: 1.7;
  padding: 2rem;
}

.new::after {
  content: "NEW"; /* new클래스 요소 뒤에 텍스트 'NEW' 삽입 */
  font-size: .75rem;
  background: #f99;
  color: #fff;
  padding: 5px;
  margin-left: 5px;
  border-radius: 3px;
}

결과

tip

CSS2에서는 ::before가 아니라 콜론을 하나만 사용하는 :before로 작성한다. 일반적으로는 CSS3 문법인 콜론 두개를 사용하지만, 오래된 브라우저 버전을 지원해야 한다면 콜론을 하나만 사용해야 한다.