Я пытаюсь использовать :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или , и браузер корректно накладывает мое изображение поверх изображения в элементе, но если я применяю класс оверлея к самому себе, он не работает.pspanimgimg

Я хотел бы, чтобы это работало, потому что это spanменя оскорбляет, но что более важно, у меня есть около 100 сообщений в блоге, которые я хотел бы изменить, и я могу сделать это за один раз, если бы я мог просто изменить таблицу стилей, но если я должен вернуться назад и добавить дополнительный spanэлемент между aи imgэлементами, это будет намного больше работы.

К сожалению, большинство браузеров не поддерживают использование :afterили использование :beforeтегов img.

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:

Я просто поддельные содержание -метод

чистый метод CSS для включения img: after.

Вы можете проверить 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+

✓ Сафари

Нет поддержки

⊗ Internet Explorer 8/9

Пожалуйста, проверьте в других браузерах

Из-за того, <img>что элемент заменяется , стиль документа на него не влияет.

Чтобы сослаться на него в любом случае, <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>

Вот еще одно решение, использующее контейнер div для img при использовании :hover::afterдля достижения эффекта.

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 :: before, чтобы показать изображение и расположить его в соответствии с моими потребностями. Вот 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');
}

Попытайся.

Попробуйте :: после предыдущего элемента.