Подчеркиваем текст или бек-граунд для текста

VS

Задача: eсть текст, хочется не просто подчеркнуть (text-decoration: underline), а сделать это красиво.

Вместо зеленой полоски, смотрящейся как след от маркера, может быть любое изображение, которое мы можем повторять по оси X.

Основная проблема здесь то, что для многострочного эффекта, background-image должен быть применен к inline контейнеру. А inline контейнер теряет сразу же ряд полезных свойств, таких как, например, центровка.

Т.е. если у нас есть H2 с текстом по центру (text-align: center), центровкой контейнера вроде margin: auto и т.п. и мы хотим вот так вот подчеркнуть текст, то мы теряем сразу множество полезных свойств как только включаем inline режим.

Поэтому нам придется добавить inline контейнер внутрь H2. Это может быть S, SPAN или FONT. Логично мне кажется использовать здесь S — так как мы перечеркиваем надпись, но нужно убрать стили по умолчанию.

Мало букафф? Читайте есчо !

Верстка: большой блок слева и четыре малых справа

Март 15, 2025 г.

Дизайнеры любят разные компоновки блоков, но не всегда удобно использовать таблицы для верстки, чтобы воплотить дизайн в HTML. Рассмотрим одну из компоновок, ...

Читать

Почему не работает стиль :: before или :: after?

Октябрь 22, 2017 г.

Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут "не сработать"? ...

Читать

Прогресс бары, анимация загрузки...

Январь 11, 2019 г.

Сайт, где вы найдете конструкторы анимации прогресс баров - loading.io. Я бы сказал налетай, подешевело, но всё абсолютно даром. Основная особенность ...

Читать

CSS высота равна ширине

Август 11, 2019 г.

Ширина и высота контейнера - независимые параметры, но иногда хотелось бы чтобы связь между ними была, к примеру, для сохранения пропорций контейнера при адаптивной верстке. Прямой связи в CSS между width и height нет, и нет возможности задать ...

Читать
 

Комментарии к «Подчеркиваем текст или бек-граунд для текста»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: