CSS에서 ::before와 ::after는 선택한 엘리먼트의 앞 또는 뒤에 content에 지정된 문자열을 추가합니다. 보통 엘리먼트를 장식 할 때 사용 됩니다.
Example :
<html>
<head>
<style>
/* 링크 뒤에 -> 화살표 추가 */
a.a::after {
content: "->";
}
/* 링크 앞에 <- 화살표 추가 */
a.b::before {
content: "<-";
}
</style>
<body>
<p><a href="https://kukuta.tistory.com" class="a">https://kukuta.tistory.com</a></p>
<p><a href="https://kukuta.tistory.com" class="b">https://kukuta.tistory.com</a></p>
</body>
</html>
Result :
https://kukuta.tistory.com->
<-https://kukuta.tistory.com
