Как спозиционировать изображения справа от заголовка?

Question

[Николай]

Всем доброго дня.

Столкнулся с проблемой.
На странице выводятся статьи, у статей есть заголовки (H2).
У некоторых статей справа от заголовка выводить значок new.
Всё бы ничего, но т.к. сайт адаптивный, в определенный момент заголовок начинает занимать 2 строки и значок в этом случае всё ломается.
По задумке он должен перемещаться на вторую строку и быть в конце последнего слова в заголовке.

Картинку вывожу через css background.

Пробовал различные варианты конструкций блоков, не могу добиться нужного результата...
Для наглядности набросок:
prntscr.com/fpxj42

Есть конечно одна идея, убрать все css "навороты" у H2 (сделать как простой текст) и пустить в конце картинку обычным img, но может есть способ элегантнее?

Answer 1

[Владислав]

Я бы вообще отказался от картинки и добавил в заголовок спан <h2>Заголовок<span class="new">NEW</span></h2> и стилями сделал ее на вид как картинку.

Comments

[Николай]

В наброске картинка "new" упрощена, дизайнер нарисовал более замысловатую иконку.
Точно повторить её стилями не получится.
Но если других вариантов не окажется, возможно придется упрощать иконку и делать так как Вы предлагаете...

[Владислав]

hoindex: Как вариант - так же спаном, но display: inline-block, height/width по размеру картинки, картинку как background-image

[Владислав]

Еще вариант - использовать :after

h2:after {
  content: '';
  display: inline-block;
  background: /*картинка*/;
  height: /*высота картинки*/;
  width: /*ширина картинки*/
  margin-left: /*отступ от текста заголовка*/
}

[Николай]

Владислав: я пробовал похожий вариант, только вместо <span> использовал <div>
Возможно проблема в этом...
Спасибо, попробую!

Answer 2

[Николай]

Товарищи, спасибо всем за помощь!
Перепробовал все варианты, в принципе всё заработало ПОЧТИ как нужно, за одним исключением.
В какие-то моменты при масштабировании, когда ширины контейнера для вывода заголовка + значка перестает хватать, значок переносится на следующую строку...

Получается вот такая штука - prntscr.com/fpzz99

Если продолжать уменьшать страницу, то текст переносится на вторую строку и всё становится нормально, а вот что делать до этого не понимаю.
Нужно чтобы значок был всегда справа от последнего символа заголовка.
И если не влезает по ширине в контейнер либо раздвигал его (по дизайну это будет нормально) либо переносился вместе с последним словом.

UPD: Решил проблему при помощи PHP и span, обрамляю последнее слово в заголовке+span с картинкой в <nobr>.
Получается span с картинкой всегда на одной строке.

Answer 3

[Владимир]

Выводите картинку не как background-image, а как обычное изображение. Попробуйте картинке дать стили:
<img style='display:inline-block; float:left;'>