Я намагаюся використовувати :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:

Я просто підроблені зміст -метод

чистий метод 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+

✓ Opera 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;
} 

Щоб побачити це в дії, перегляньте створену нами загадку . Просто ви знаєте, що це зручно для веб-переглядачів, і не потрібно хитрість коду "підробляти вміст".

Я думаю, що найкращий спосіб зрозуміти, чому це не працює, це: до і: після вставлення їх вмісту до або після вмісту в тег, до якого ви їх застосовуєте. Таким чином, це працює з divs або spans (або більшістю інших тегів), оскільки ви можете розміщувати вміст всередині них.

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

Псевдоелементи, згенеровані :: до і :: після, містяться у вікні форматування елемента і, отже, не застосовуються до замінених елементів, таких як 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');
}

Спробуй це.

Спробуйте :: after на попередньому елементі.