Веб-разработка

Методы создания подчеркивающий линии для заголовков на уровне текста

В Codepen представлено 4 метода создания подчеркивающей линии для заголовков на уровне текста. Важное отличие в отображении можно заметить в мобильном варианте.

  1. Первый метод реализован за счет связки relative-absolute и созданием псевоэлемента after. В мобильном виде текст подчеркивается не весь, а лишь создается нижняя подчеркивающая линия, по аналогии с border-bottom;
  2. Второй метод реализован через отрисовку линии из фрагмента изображения, размер которого задан через background-size. В мобильном виде подчеркивается весь текст при переносе содержимого.
  3. Третий и четвертый методы схожи по стилизации, но совершенно отличаются поведением отрисовки. Важную роль играет сущность элемента, для которого реализован стиль. Блочный элемент в мобильном виде подчеркивает весь блок текста, а строчный — каждую строку при переносе текста. Обратите внимание на ширину линии в последних двух примерах.

Чтобы рассмотреть результат в полноэкранном виде, жми на кнопку Посмотреть

See the Pen underline for headings by Anna Blok (@anna_blok) on CodePen.0

Предыдущий пост

Важные отличия между Sass и SCSS

Следующий пост

Создание блоков не прямоугольной формы с градиентом

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

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