Как сделать полоску под текстом в css

Пересечение текста линией в CSS

Пересечение текста линией в CSS

От автора: в начале этого года я наткнулась на это демо от Флорина Попа, в нем линия проходит либо поверх, либо позади букв заголовка. Я подумала, что это крутая идея, но в реализации было несколько мелочей, которые я могла бы упростить и улучшить одновременно.

Пересечение текста линией в CSS

Во-первых, в оригинальной демо-версии текст заголовка дублируется, чего, как я знала, можно было легко избежать. Также длина линии, проходящей через текст, является магическим числом, что не является очень гибким подходом. И, наконец, можем ли мы избавиться от JavaScript?

Итак, давайте посмотрим, что у меня в конечном итоге получилось.

HTML структура

Флорин помещает текст в элемент заголовка, а затем дублирует этот заголовок, используя Splitting.js, чтобы заменить текстовое содержимое дублированного заголовка спанами, каждый из которых содержит одну букву исходного текста.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Поскольку разделение текста на несколько элементов не подходит для программ чтения с экрана, мы задали для всего role со значением image и указали aria-label. Это генерирует следующий HTML:

Основные стили

Мы помещаем заголовок в центр его родителя (body в данном случае), используя grid-макет:

Пересечение текста линией в CSS

Заголовок не растягивается на всю ширину родителя, но вместо этого помещается в середине. Мы также можем добавить некоторые штрихи, например, красивые font или background для контейнера. Далее мы создаем линию с абсолютно позиционированным псевдо-элементом ::after, его толщина (height) $h:

Приведенный выше код задает позиционировании и толщину псевдо-элемента, но что насчет его ширины? Как заставить его растягиваться от левого края области просмотра до правого края текста заголовка?

Длина линии

Итак, поскольку у нас есть grid макет, в котором заголовок выровнен по центру по горизонтали, это означает, что вертикальная средняя линия, делящая окно просмотра посередине, совпадает со средней линией для заголовка, разделяя их на две равные по ширине половины:

Следовательно, расстояние между левым краем области просмотра и правым краем заголовка составляет половину ширины области просмотра (50vw) плюс половина ширины заголовка, что может быть выражено как процентное значение при вычислении ширины псевдо-элементов.

Таким образом, width для нашего псевдо-элемента ::after будет:

Как сделать, чтобы линия размещалась перед и позади букв?

Пока что мы получили просто красную линию, пересекающую текст:

Мы хотим, чтобы некоторые буквы отображались поверх линии. Чтобы получить этот эффект, мы случайным образом задаем им (или не задаем) класс .over. Это означает, что нужно немного изменить код Pug:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Затем мы сопоставляем буквы с классом .over и задаем им положительный z-index.

Моя первоначальная идея заключалась в использовании translatez(1px) вместо z-index: 1, но потом мне показалось, что использование z-index имеет лучшую поддержку браузеров и требует меньше усилий.

Линия проходит поверх одних букв, но под другими:

Анимация

Теперь, когда мы справились со сложной частью, мы также можем добавить анимацию. В начале малиновая линия смещается влево (в отрицательном направлении оси x, поэтому знак будет минус) на 100% ширины, а затем возвращается в нормальное положение.

Я предпочла, чтобы прежде чем запускается анимация линии, прошло немного времени. Это означало добавление 1s задержки, что, в свою очередь, означает добавление ключевого слова backwards для animation-fill-mode, чтобы линия до начала анимации находилась в позиции 0%:

Немного 3D

Это дало мне еще одну идею, заключающуюся в том, чтобы линия пронизывала буквы, входила в начале поверх буквы, а затем уходила под нее (или наоборот). Это требует реального 3D и нескольких небольших настроек.

Во-первых, мы устанавливаем для transform-style заголовока значение preserve-3d, так как хотим, чтобы все его потомки (и псевдо-элементы) были частью одного и того же 3D-контекста, что позволит их размещать и пересекать так, как они расположены в 3D.

Затем нам нужно повернуть каждую букву вокруг своей оси y, причем направление вращения зависит от наличия случайно назначенного класса (имя которого мы меняем на .rev от «reverse», так как «over» не совсем соответствует тому, что мы здесь делаем).

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

Чтобы обойти эту проблему, мы задали для заголовка display: flex. Однако это создает новую проблему – ширина элементов span, содержащих только пробел (» «), сбрасывается на ноль.

Пересечение текста линией в CSS

Простое решение этой проблемы — установить white-space: pre для наших спанов с классом .letter. Как только мы это сделаем, мы сможем повернуть спаны на угол $a… в одном или другом направлении!

Сложный заголовок с линиями по бокам текста на css

Сложный заголовок с линиями по бокам текста на css

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

Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after . В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.

Верстка заголовка с горизонтальной линией слева и справа от текста

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

Выглядит это следующим образом (живой пример):

Раньше для решения данной задачи я бы задействовал два тега: первому задал бы верхний бордюр, а второй сместил бы чуть вверх, задав ему белый фон и внутренний отступ слева и справа.

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

Как несложно догадаться, для добавления линий будут задействованы псевдоэлементы :before и :after .

Вот CSS-код с комментариями для основных свойств, решающих поставленную задачу:

Вот таким хитрым кодом это и делается.

У меня есть еще один аналогичный вариант решения данной задачи — через абсолютное позиционирование псевдоэлементов :before и :after . Однако, он оказался непригодным к использованию из-за очередного бага в браузере Internet Explorer (даже в последних версиях).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *