[CSS] img태그에서 ::after 및 ::before 안되는 이유

요약

 닫는 태그가 없는 경우에는 ::after와 ::before와 같은 가상요소(Pseudo-element)를 사용할 수 없다.

들어가며

Stylus extension으로 나만의 커스텀을 하다가 img를 replace하기 위해 :after를 사용하려고 했었다. Chrome 개발자도구에서는 분명 :after가 잘 나타나지만, 랜더링 되지는 않았다.

 

img 태그는 ::after와 ::before를 쓸 수 없다

after와 before같은 가상요소(Pseudo element)는 기존의 컨텐츠의 앞뒤에 덧붙여서 추가한다. 그러나 img 태그는 컨텐츠를 담을 수 없기 때문에 추가 할 수가 없다. 

 

::after와 ::before를 대신하는 방법

after와 before를 쓰는 목적은 무엇인지가 중요하다. 일반적인 개발 / 퍼블리싱 단계에서는 img태그가 ::after 및 ::before를 지원하지 않아도 별 문제가 되지 않는다. 자바스크립트나 html 요소를 추가함으로써 충분히 대체 가능하기 때문이다.

그러나 그런 경우라면 해결책을 찾진 않을 것이다. 인터넷에는 jquery등을 활용해 대신하는 방법에 대해 말하고 있다. 하지만 결론은 간단하다. after와 before를 쓰지 않으면 된다. 문제를 해결하는데 있어서 after와 before가 유일한 해결책이 아니다. 

 

img의 src를 대체하는 용도로 필요했다면

이 경우는 예외적으로 가능하다. 당연하겠지만 사이트의 개발자 / 퍼블리셔라면 이 단락을 볼 필요도 없다. 사이트 커스텀을 위해 외부에서 주입하는 css 밖에 사용하지 못하는 경우에, :after로 원래 이미지를 가려서 대체할 생각이었다면, 방법은 존재한다. 아래 글을 참조하면 된다. 

 

[CSS] img태그의 src를 css로 대체하는 방법

 

 

다음 글도 읽어보세요

 커밋을 잘게 쪼개자 - 커밋은 언제 하는 것이 가장 좋을까?

 [리팩토링] 코드 숨기기, 가독성 좋은 코드 짜기

 API는 인터페이스다 - 프론트 개발과 API
 await의 함정, 숨은 병목을 찾자

 [CSS] em과 rem, 제대로 알고 사용하자!

 [CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리