Как использовать :before для изображений в CSS без span?

Быстрый ответ

В самом деле, непосредственное применение псевдоэлементов :before и :after к тегам <img> невозможно, так как они являются заменяемыми элементами в браузере. Однако, такое ограничение можно обойти, используя в качестве обертки контейнер <div> и присваивая к нему псевдоэлемент.

<div class="img-before"><img src="image.jpg" alt=""></div>

.img-before:before {
  content: "✓"; // Пометим это!
  position: absolute;
  top: 0; left: 0; // Разместим в углу!
}

.img-before {
  position: relative; // Установим псевдоэлемент относительно этого блока
}

Кроме того, существуют и другие методы, такие как применение JavaScript/jQuery и других HTML элементов для достижения желаемого результатa.

Работа с JavaScript/jQuery

Чтобы добавить псевдоэлемент к изображению, можно воспользоваться JavaScript/jQuery, который предлагает добавить элемент <span> сразу после <img>:

$('.target').after('<span class="overlay"></span>'); // Вуаля, элемент здесь!

Это прямой и эффективный способ добавления содержимого после изображения.

Исследование HTML альтернатив

Использование элемента <picture>

Удивительно, но элемент <picture> поддерживает псевдоэлементы и может стать превосходной альтернативой <img>.

<picture> // Выбор за вами!
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="">
</picture>

К элементу <picture> можно применить :before и :hover::after, что позволит создать элегантные эффекты наложения.

Подробнее об этом расскажет наш спикер на видео

Использование контейнеров <div>

Обернув <img> в контейнер <div>, вы получите больше возможностей для управления дополнительным содержимым. Такой родительский контейнер может содержать и изображение и наложения, что упрощает их размещение.

Свойство content в псевдоэлементах

Свойство content псевдоэлемента расширяет пространство для вашей креативности, позволяя вставлять изображения и текст, что прекрасно подходит для добавления небольших иконок или мультимедийного содержимого.

Совместимость с различными браузерами

Техники наложения

Использование :hover::after позволяет создавать наложения для изображений при наведении курсора, уменьшая необходимость добавления лишних элементов в HTML код.

Вопросы совместимости

Не забывайте о старых версиях браузеров, таких как Internet Explorer 8/9, которые могут усложнить решение задачи. Лучше использовать методы, универсальные для различных браузеров, чтобы обеспечить широкую совместимость.

Ресурсы и практические примеры

Пример с jQuery наложения

Тестируйте свое решение в разных браузерах, чтобы убедиться, что наложения работают корректно.

Полезные внешние ресурсы

Изучайте авторитетные источники, такие как MDN и CSS-Tricks, чтобы освоить подходы к реализации и примеры кода.

Визуализация в действии

Демонстрации на jsFiddle предоставят вам реальные примеры работы ваших наложений и позволят лучше понять принципы их работы.

Ограничения старых браузеров

Проведите исследования, чтобы понять особенности работы в старых браузерах, которые могут иметь ограничения при использовании некоторых техник.

Визуализация

Представьте, что ваш телевизор (🖥️) символизирует элемент img.

Вы нажимаете красную кнопку на пульте (🔴), ожидая появления баннера "Следующая программа" перед началом шоу.

Но, увы!

🖥️ + 🔴 = [(?)] И не происходит ничего!

Так же как и телевизор, img показывает только то, что ему заложено, без возможности добавить контент до или после. Напротив, div ведет себя как экран с подключенным кабельным тюнером, способным отобразить баннер "Следующая программа".

Полезные материалы

1. ::before – CSS: Cascading Style Sheets | MDN — Ваш помощник в использовании ::before.
2. Selectors Level 4 — Самые последние стандарты W3C по ::before.
3. ::before / ::after | CSS-Tricks — Обучение с наглядными примерами по ::before и ::after.
4. Can I use... Support tables for HTML5, CSS3, etc — Таблицы совместимости браузеров для ::before.
5. CSS ::before Selector — Вводное руководство по селектору ::before.
6. ::before | Codrops — Подробный справочник по ::before.