: img 요소에서 작동하지 않습니까?

: img 요소에서 작동하지 않습니까?

---

:before셀렉터 를 사용하여 이미지를 다른 이미지 위에 배치 하려고 하지만 이미지를 img요소 앞에 배치하는 것이 작동하지 않고 다른 요소 만 작동한다는 것을 알았습니다 . 특히 내 스타일은 다음과 같습니다.

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

그리고 이것이 잘 작동한다는 것을 알았습니다.

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

그러나 이것은하지 않습니다 :

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

그 대신 div또는 p요소를 사용할 수 span있으며 브라우저가 img요소 의 이미지 위에 이미지를 올바르게 오버레이 하지만 오버레이 클래스를 img자체에 적용하면 작동하지 않습니다.

추가 작업으로 인해 span기분이 상하게 되었기 때문에이 작업을 수행하고 싶습니다. 더 중요한 것은 수정하려는 블로그 게시물이 100 개 정도 있는데, 스타일 시트를 수정할 수 있으면 한 번에이 작업을 수행 할 수 있습니다. 난 다시 가서 여분의 추가해야하지만 만약 span사이에서 요소 a와 img요소, 이것은 더 많은 작업을 할 것이다.

---

불행히도, 대부분의 브라우저는 img 태그 사용 :after또는 지원하지 않습니다 :before.

http://lildude.co.uk/after-css-property-for-img-tag

그러나 JavaScript / jQuery로 필요한 것을 수행 할 수 있습니다. 이 바이올린을 확인하십시오.

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

편집 :

이것이 지원되지 않는 이유는 coreyward의 답변을 확인하십시오 .

---

사전 및 사후 의사 선택기는 HTML 요소를 삽입하지 않습니다. 대상 요소의 기존 내용 앞이나 뒤에 텍스트를 삽입합니다. 이미지 요소는 텍스트를 포함하거나 후손을 가지고도 없기 때문에 img:before또는 img:after당신에게 좋은를 할 것입니다. 이것도 같은 요소에 대한 경우 <br>와 <hr>동일한 이유로.

---

순수한 CSS 에서이 작업을 수행하는 방법을 찾았습니다.

는 그냥 가짜 내용 해요 -method

img : after를 활성화하는 순수한 CSS 메소드

CodePen을 확인할 수 있습니다 . 나는 단지 가짜 콘텐츠 이거나 소스를 참조하십시오 .

소스 및 스 니펫

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

브라우저 지원

✓ Chrome 10 이상

✓ Firefox 11 이상

✓ 오페라 9.8+

✓ 사파리

지원 없음

Explorer Internet Explorer 8/9

다른 브라우저에서 테스트하십시오

---

때문에의 성격에 <img>있는 Being 대체 요소 , 문서의 스타일은 영향을받지 않습니다.

어쨌든 그것을 참조하기 위해 <picture>의사 요소를 첨부 할 수있는 이상적인 네이티브 래퍼를 제공합니다.

img:after, picture:after{
    content:"\1F63B";
    font-size:larger;
    margin:-1em;
}

<img src="//placekitten.com/110/80">

<picture>
    <img src="//placekitten.com/110/80">
</picture>

---

다음 :hover::after은 효과를 달성하기 위해 img에 div 컨테이너를 사용하는 또 다른 솔루션 입니다.

HTML은 다음과 같습니다.

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

CSS는 다음과 같습니다.

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
} 

실제로 작동하는지 확인하려면 내가 만든 바이올린을 확인하십시오 . 크로스 브라우저 친화적이므로 '가짜 콘텐츠'로 코드를 속일 필요가 없습니다.

---

왜 이것이 작동하지 않는지를 보는 가장 좋은 방법은 적용하기 전에 태그 내에서 내용 전후에 내용을 삽입하는 것입니다. 따라서 내용을 넣을 수 있기 때문에 div 또는 span (또는 대부분의 다른 태그)에서 작동합니다.

<div>
:before
Content
:after
</div>

그러나 img는 자체 포함 된 자체 닫기 태그이며 별도의 닫기 태그가 없으므로 태그 안에 아무 것도 넣을 수 없습니다. (이것은처럼 <img>Content</img>보이지만 물론 작동하지 않습니다.)

나는 이것이 오래된 주제라는 것을 알고 있지만 Google에서 먼저 나타나므로 다른 사람들이 배우는 데 도움이되기를 바랍니다.

---

이것은 나를 위해 작동합니다 :

html

<ul>
    <li> name here </li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

---

이전 요소에서 :: after 를 시도하십시오 .

---

:: before 및 :: after에 의해 생성 된 의사 요소는 요소의 서식 상자에 포함되어 있으므로 img 또는 br 요소와 같은 대체 된 요소에는 적용되지 않습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

---

나는 그것을 시도하는 더 간단한 방법을 찾았습니다. HTML은 다음과 같습니다.

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

내가 <p>한 것은 이미지 태그 뒤에 빈 태그를 배치하는 것 입니다. 이제 p ::를 사용하여 이미지를 표시하고 필요에 따라 이미지를 배치합니다. CSS는 다음과 같습니다.

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

시도 해봐.

참고 URL : https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements