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

VS

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

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

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

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

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

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

SVG to CSS конвертер

Июнь 21, 2020 г.

Небольшая тулза по конвертации SVG картинок в CSS backgroung-image код. Рекомендую предварительно произвести оптимизацию изображения, убрать лишние/невидимые слои, маркеры программ редакторов SVG, лишние теги и т.п. Вы можете загрузить SVG в ...

Читать

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-68b091dec7833407236134/] Ключевым является значение auto для левого и правого отступов. ...

Читать

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

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

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

Читать

Эффект исчезновения/появления цветности CCS3

Апрель 7, 2017 г.

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

Читать
 

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

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



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