Я пытаюсь заменить <img> элементы смайликами с разными изображениями через CSS (чтобы я мог сопоставить их с используемым стилем). Я подумал, что могу просто вставить еще один смайлик с псевдоэлементом :before CSS и скрыть оригинальный элемент. Это будет работать, за исключением того, что браузеры, кажется, не вставляют дополнительное изображение! Это происходит только в том случае, если я пробую это с элементом <img>, отлично работает, когда я пробую это с <span>. Код, который я пробовал:
<!doctype html>
<style>
img.icon:before {
display: inline-block;
content: url(smiley.png);
width: 16px;
height: 16px;
}
</style>
<p>Lorem ipsum <img src="smiley.png" class="icon" alt=":)"> dolor sit amet...</p>
Спецификация в http://www.w3.org/TR/CSS2/generate.html#before-after-content имеет примечание внизу:
Примечание. Эта спецификация не
полностью определить взаимодействие
: до и: после с заменой
элементы (такие как IMG в HTML). это
будет определено более подробно в
будущая спецификация.
Мы используем фоновое изображение, как это предлагается в комментариях, но проблема заключается в том, что изображения не будут печататься с настройками печати по умолчанию. Следующим вариантом, который мы рассматриваем, является использование <span class="icon"><img ...></span> и добавление :before в диапазон, но это немного уродливо.
Мне также интересно, указано ли это в CSS3, чтобы можно было исправить это в ближайшем будущем.