css) pseudo element

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

 

 

p::before, p::after

다음과 같이<p> 태그가 있다.

index.html

이렇게 pseudo element를 이용해 특정 태그의 일부분에만 스타일을 입힐수 있다.

여기서는 <p> 태그의 before과 after에 content를 추가하고 스타일을 변경하고 있다.

 

 

---

 

pseudo element에 content가 없다면

 

위와 같이 <p>의 after에 스타일을 입혔다.

여기서 content를 지운다면

 

content만 지웠음에도 배경색등 모든 요소들이 사라진다.

 

하지만 <img>는 이미지 자체가 content로 간주되므로 pseudo element에 content를 추가해도 보이지 않는다.

 

---

pseudo element의 parent는 해당 태그.

예를들어 div::before, div::after의 parent는 div .