html & css
css) pseudo element
tose33
2021. 8. 13. 17:59
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
p::before, p::after
다음과 같이<p> 태그가 있다.
이렇게 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 .