CSS 가상 요소(Pseudo-Element)

🔍 가상 요소란?

---

• 의사 요소라고도 함 👉🏻 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
• CSS 가상 요소는 선택자로 선택한 요소에 추가하는 키워드로 선택한 요소의 지정된 부분에 스타일을 적용한다.
• 가상 클래스(ex. :hover)처럼 선택자에 추가되고, 존재하지 않는 요소를 존재하는 것처럼 부여하여 HTML에 새로운 요소를 추가한 것처럼 동작한다.

 

• 많이 사용하는 가상 요소의 종류

::before	요소 앞에 새로운 컨텐츠 추가
::after	요소 뒤에 새로운 컨텐츠 추가
::first-line	웹 브라우저에 보이는 상태를 기준으로 요소 텍스트 첫 글자 선택
::first-letter	웹 브라우저에 보이는 상태를 기준으로 요소 텍스트 첫 줄 선택

 

🔍 가상 요소 작성 방법

---

선택자::가상요소 {
  속성: 속성값;
}

 

가상 요소는 키워드 앞에 이중 콜론(::)을 붙여 표기한다. CSS1과 CSS2에서는 단일 콜론으로만 표기했으나 가상 클래스와 구분을 위해 CSS3부터는 이중 콜론으로 표기하는 것이 표준 방법이다. 대부분 브라우저는 두 구문 모두 지원하고 있으나 가급적이면 표준 방법을 쓰는 것이 좋겠다.

 

✍🏻 HTML

<p>Hello, </p>

 

✍🏻 CSS

p::after {
  content:"mitt!";
  color: green;
}

 

::after 구문을 사용해 p 태그 뒤에 “mitt!” 이라는 텍스트를 추가한다.

 

✍🏻 Result

 

🔍 가상 클래스와 가상 요소를 조합하여 사용해 보자

---

✍🏻 HTML

<div class="container">
  <p class="heart">🥰</p>
  <button>바뀝니다.</button>
 </div>

 

✍🏻 CSS

button {
  width: 320px;
  height: 40px;
  border: none;
  background-color: red;
  color: white;
}

button:hover::before {
  content:'깜장으로 ';
}

button:hover {
  background-color: black;
}

.container:hover .heart::after {
  content:'❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️';
}

 

• 버튼에 마우스를 올리면 ::before 구문을 통해 button 태그로 둘러싸인 “바뀝니다.” 앞에 “깜장으로 “ 텍스트가 추가된다.
• ::before, ::after는 기본적으로 인라인 요소이기 때문에 버튼 전체 색상을 변경하기 위해 태그를 따로 빼서 작성하였다.
• 부모 클래스 container에 마우스를 올리면 자식 클래스인 heart에 ::after로 추가한 하트가 나타난다.

 

✍🏻 Result

 

🧐 가상 요소 선택자로 tooltip을 구현해 보자

---

✍🏻 HTML

<div>
  <span data-tooltip="두둥">이곳</span>에 마우스를 올리면 말풍선이 나타납니다.
</div>

 

✍🏻 CSS

span {
  position: relative;
  font-weight: 700;
  color: green;
  cursor: help;
}

span:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 24px;
  min-width: 50px;
  border-radius: 10px;
  background-color: green;
  color: white;
  padding: 12px;
  z-index: 1;
}

 

• ::after와 data-* 속성을 사용해 tooltip 내용을 추가한다.
• position 속성은 tooltip의 위치를 간편하게 조정하기 위해 사용하였다.
• 이 경우 span 태그 위에 마우스 커서를 올리면 가상 클래스에 지정한 속성 값에 따라 tooltip이 나타난다.

 

✍🏻 Result

 

🧐 ::after로 객체 사이에 구분선을 구현해 보자

---

✍🏻 HTML

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

 

✍🏻 CSS

body {
  display: flex;
  justify-content: center;
}

.container {
  border: 1px solid red;
  width: 320px;
  text-align: center;
}

.item {
  line-height: 200%;
}

.item:nth-child(3)::after{
  content: '';
  position: absolute;
  left: 608px;
  bottom: 150px;
  width: 320px;
  height: 1px;
  background-color: gray;
}

 

✍🏻 Result

 

🧐 가상 요소가 적용되지 않는 경우

---

• 가상 요소는 컨테이너 요소(ex. div, span…)에서만 정의할 수 있다.
• input, img 같은 요소는 지원하지 않으나, button 태그의 경우 정의가 가능하다.
• IE7 이하 버전은 지원하지 않고, IE8 이하 버전은 CSS3을 지원하지 않아 단일 콜론만 지원한다.