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

VS

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

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

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

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

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

Написать комментарий

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

Скрыть/изменить стили выделения в HTML - псевдокласс css::selection

Март 12, 2019 г.

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

Читать

Верстка слоя-подкладки во всю ширину viewport

Апрель 16, 2019 г.

В лендинговой верстке дизайнеры часто прибегают к следующему приему - фон одного или нескольких блоков растягивается на всю ширину документа. При этом ...

Читать

 

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

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



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