: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);
}

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

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

::after 이미지 의 대체 이미지 를 표시 하는 데 사용될 수 있습니다.

아래 예를 참조하십시오. 처음 2 개의 img태그는 깨진 URL을 가리 킵니다. 그러나 두 번째 이미지는 브라우저에서 기본 깨진 로고 대신 대체 이미지를 표시합니다. 그러나 이것이 실제로 실용적이지 않다는 것을 잘 모르겠습니다. 제대로 작동하려면 까다로운 일입니다.

img {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  vertical-align: top;
}
img:not(:first-child)::after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "<" attr(alt) "> NOT FOUND";
  border: 1px dashed #999;
  background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}

<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

이 코드를 사용해보십시오

.button:after {
    content: ""
    position: absolute
    width: 70px
    background-image: url('../../images/frontapp/mid-icon.svg')
    display: inline-block
    background-size: contain
    background-repeat: no-repeat
    right: 0
    bottom: 0
}

나는 그것을 시도하는 더 간단한 방법을 찾았습니다. 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');
}

시도 해봐.

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