CSS - использование изображения вместе с ударением для заголовка абзаца

Question

Обычным и красивым типографским эффектом является небольшое изображение, возможно, стилизованная стрелка, какой-то текст и линия акцента. Примерно так:

-> Теперь этот абзац ---------------------------------

Где "->" - это небольшая графика, а "-------" - это линия акцента, может быть цветная.

Я хотел бы сделать это в css, поэтому в системе управления контентом автор просто пометил бы строку "h3", а определение стиля добавило бы графику и линию акцента.

Я могу вставить графику, используя CSS CSS, который выглядит так:

hd3 { background-image: url (/image/arrow_button.gif); background-position: слева вверху; повторение фона: повторение; отступ слева: 55 пикселей; }

но я не знаю, как добавить следующую строку акцента. Линия ударения должна начинаться после текста и продолжаться до правого поля страницы.

Answer 1

Есть несколько способов сделать это. Наилучшее решение может идти

<h3><strong>Words</strong></h3>

с CSS у вас выше плюс

h3 strong { background-color:#ffffff; padding: 0 5px; } /*if white is the background color you want*/

и добавление фонового изображения с вашей стрелкой и продолжающейся линией, при этом изображение будет иметь максимальную ширину контейнера, если оно есть.

Объявляя цвет фона для элемента в h3, вы создаете иллюзию остановки изображения и выделения линии на другом изображении. Обратите внимание, что вам придется немного разобраться, может ли h3 обернуться. Вы можете получить более сложное решение для этого.

Альтернативно Вы можете просто вставить изображение:

<h3>Words <img src=".." alt="" /></h3> 

Обратите внимание, что это означает, что ваша презентация более непосредственно контролируется присутствующим элементом HTML, который в некоторых отношениях является неоптимальным, но, несомненно, простым и не является семантическим кошмаром, поскольку не скрывает содержимого.