Как сделать линию под текстом css
Перейти к содержимому

Как сделать линию под текстом css

  • автор:

Как добавить линию за текст в css? [дубликат]

введите сюда описание изображения

Как реализовать горизонтальную линию за текстом как на картинке? Пробовал использовать свойство box-shadow — линия появляется ниже текста на несколько пикселей. Line-height не помогает т.к. меняется междустрочный интервал, а не отступ тени. Есть какое-нибудь свойство, которое указывает отступ box-shadow? Псевдоэлемент :after применяется ко всему тексту как к блоку, а не к строкам как на фото. Как реализовать подобную линию? Заранее спасибо

Как сделать линию под текстом?

Всем привет. Посоветуйте как лучше решить проблему. Есть текст справа и слева и черная линия. Нужно сделать так, чтобы не задавая тексту никакой фон, он перекрывал черную линию в месте своего размера.
https://jsfiddle.net/sropwj1p/

  • Вопрос задан более трёх лет назад
  • 3353 просмотра

6 комментариев

Оценить 6 комментариев

iiiBird

iBird Rose @iiiBird Куратор тега CSS

Подчеркивание для блочных элементов вроде тега можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Линия под заголовком   

Пример текста

Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.

Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору H1 . Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

Рис. 1. Линия под заголовком

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору H1 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Подчеркивание заголовка   

Пример текста

Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.

Результат данного примера показан на рис. 2.

Рис. 2. Подчеркивание заголовка

Рис. 2. Подчеркивание заголовка

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

Как сделать горизонтальную линию между текстом

Author24 — интернет-сервис помощи студентам

Как задать горизонтальную линию с текстом посередине?
Всем привет! Пробую освоить верстку в html, сss, bootstrap. Столкнулся с такой задачей. Нужно.

Подскажите как сделать горизонтальную линию во всю ширину
Всех с праздником! Народ, подскажите как вставить полосу между строк в моём случае, чтобы было как.

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

Необходимо сделать горизонтальную линию
Подскажите пожалуйста как сделать линию как показано на картинки 1 Код страницы HTML <!DOCTYPE.

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

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