이전엔 잘 안쓰던 거였는데 요즘은 거의 달아서 쓰고 있다.
원하는 엘리먼트 CSS 속성 뒤에 :before나 ::before :after ::after를 쓰면 된다.
대부분 content는 content: " " 으로 해두지만 앞쪽에 무언가가 나와야 할때는 특수문자를 넣어서 쓰곤 한다.
:before 해두고 backgroud 컬러를 별도로 둔다.
보더 컬러를 다른걸 주고 보더 컬러 스타일을 바꾼다.
또한 별도의 top, left bottom등의 포지션을 주거나 position을 absolute로 준다.
content는 content: ' ';로 해두고 필요한 일을 한다.
마진이나 rotate등을 활용할 수 있다.
필요에 따라서는 display inline을 활용하여 after로 문장 끝쪽에 뭔가를 표기한다.
브라우저 호환성을 많이 따졌었는데 요즘은 솔직히 많이 고려하진 않는다.
그래도 간간히 지원하는 것을 확인을 해두거나 염두는 해두는 편이다.