img 태그에 before 또는 after를 사용하려고 하는데 잘 안되는 것 같다면 그게 맞습니다.
결론적으로 아래와 같이 jQuery를 이용하면 가능하지만, CSS에서는 어렵습니다.
$(function(){
$('.box').after('<img src="..." />');
});Psedudo element
before, after는 Psedudo element(CSS 가상선택자)로 어떤 선택된 부분 스타일링을 허용하는 선택자라고 합니다.
MDN 문서에서를 보면 CSS1, CSS2부터 나온 개념으로
Psedudo element는 :before, :after, :first-letter를 지칭하고,
Presudo component는 :hover, :active, :checked, :nth-child, :first를 지칭합니다.
CSS3에서는 ::before, ::after, ::first-letter가 추가되었습니다.
만약 IE(익스플로러)에서 before, after가 안된다면 먼저 CSS3 버전인 ::before, ::after로 선택자를 만든 것은 아닌지 확인해 보세요.
IE(익스플로러)에서는 CSS2가 호환됩니다. :before, :after 으로 사용해야 가능합니다.
아래 호환성 확인 링크를 같이 보면서 이해하시면 좋을 것 같아요.
https://caniuse.com
