[Web] pseudo element 간단한 소개

pseduo class는 

.container i:hover{
    opacity: 0.5;
}

이런식으로 주면 됐다.

자세한건 여기를 참고.

 

---

 

 

See the Pen Untitled by Jirong (@jirongkim) on CodePen.

mail이라는 클래스를 사용하면 굳이 머리말 꼬리말을 적을 필요없이 자동으로 입력되는 클래스를 작성한다고 하자.

HTML에서 구현할 수도 있다. 하지만, 아주 많이 쓰이는 클래스라면 HTML이 너무 복잡해지고 더러워질 경우가 있기 때문에 이런걸 쓴다.

 

 

이외에도 다양한 element-pseudo가 있다.

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

 

 

또한 크롬 개발자 도구에서는 ::after를 클릭하면, 적용된 css를 확인할 수 있다.