:: after를 이미지 태그와 함께 사용 하시겠습니까?

Question

의사 선택기 ::after을 사용하여 이미지에 텍스트를 추가 할 수 있습니까?

img[src="images/interface-zoom-buttons.png"]::after { 
    content: "these are the zoom buttons"; 
} 

욕망은 캡션 여러 HTML 문서에서 또 다시 익숙해 이미지 (다른 스타일은 선택의 내용에 적용됩니다) 제공하는 선택기를 사용하는 것입니다.

위의 예제에서 이미지가 올바르게 나타나고 적절한 CSS가 적용되었지만 출력 (선택기에서 제공 한)이 출력에 표시되지 않음을 알 수 있습니다.

Answer 1

img 태그는 하위 요소를 가질 수 없습니다. img은 void element이며 내용 모델에서는 어떠한 상황에서도 내용을 가질 수 없으므로

::after은 부모 요소의 마지막 자식으로 의사 요소를 만듭니다.

그래서 img::after은 브라우저가 정의에 따라 허용하지 않으므로 궁극적으로 작동하지 않습니다.

컨테이너에 img을 넣고 ::after을 넣는 것입니다.

데모http://jsfiddle.net/x2za91jw/

HTML

<div class="container"> 
    <img src="http://www.gazette-ariegeoise.fr/IMG/jpg/test.jpg" /> 
</div> 

CSS까지 속는 @JukkaKKorpela의 머리에

.container { 
    position: relative; 
} 
.container::after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 1px solid #000; 
    content:"these are the zoom buttons"; 
}