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

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

  • автор:

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

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

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

Как сделать линию с помощью HTML и CSS

как сделать линию с помощью html i css

Для подчеркивания некоторых особенно важных элементов сайта, не помешало бы использовать всевозможные и предусмотренные для этого CSS стили и свойства. Конечно же, с текстом можно особо не заморачиваться и выделить его, к примеру, жирным или курсивом, изменить задний фон или сделать рамку вокруг текста. Но не всегда один из представленных способов является подходящим. Допустим, у вас есть текст, который нуждается в разделении из-за специфики его смысловой нагрузки. Вот тут-то и приходят на помощь HTML и СSS свойства.

Как сделать в тексте линию средствами CSS

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

  • border-top — горизонтальная линия, расположенная над текстом;
  • border-right — вертикальная линия, расположенная справа от текста;
  • border-bottom — горизонтальная линия, расположенная под текстом;
  • border-left — вертикальная линия находящаяся слева.

Как сделать линию в html

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

Как сделать пунктирную или прямую линию?

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



Как сделать пунктирную или прямую линию?

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


Краткая расшифровка команд

Для более глубокого ознакомления со стилями рекомендую почитать эту статью.

Нужно уяснить, что в процессе внесения изменений в код сайта, свойства, определяющие тип линии, ее толщину и цвет перечисляются через пробел.

Приведенный способ имеет несколько достоинств:

  • Обширный ассортимент возможностей, с помощью которых можно сделать практически любую линию.
  • Легкость внесения всех необходимых изменений непосредственно в HTML код. Это во многом упрощает задачу для неопытных сайтостроителей.

Как сделать прямую горизонтальную линию с помощью тега HTML

Первое на что хотелось бы обратить ваше внимание, это то, что у данного тега, несмотря на все тонкости и принципы html, нет закрывающегося тега. Он может быть использован в любом месте html кода, между тегами и .

Атрибуты тега

  • width — отвечает за длину линии. Может указываться как в процентах, так и пикселях.
  • size — толщина линии. Указывается в пикселях.
  • color — определяет цвет линии.
  • align — атрибут, отвечающий за выравнивание линии.

К атрибуту align относятся следующие команды:

  • right — выравнивание справа;
  • left — выравнивание слева;
  • center — центральное выравнивание.

Образец html кода с использованием тега

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

сообщить об ошибке

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

CSS: Текст поверх линии

Очень часто дизайнеры требует от верстальщиков писать текст поверх линии на неоднородном фоне.

Читая сегодня Хабр, увидел очередной велосипед и решил поделиться своим вариантом решения данной проблемы.

Исходный чистый HTML :

И очень простой CSS :

.line

До и после заголовка вставляем строки с фоном под цвет линии:

.line:before, .line:after
.line:before < right: 15px; margin: 0 0 0 -100%; >.line:after

See the Pen @mihdan ) on

Ссылки

  • Текст в линии или как победить дизайнера (велосипед)
  • Живой пример на сайте «Российский миротворей»

Одноклассники
Автор: Кобзарёв Михаил

Русский разработчик со стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Joomla, Drupal, Opencart, Laravel, Moonshine. Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги. Веду блог о разработке , нанять меня.

Добавление горизонтальных линий до и после заголовка или изображения на CSS

Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать CSS и сделать при этом вполне адаптивный вариант.

Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:

Для основной обертки используем следующие CSS-правила:

text-align : center ; /* выравнивание заголовка по центру обертки */

width : 80% ; /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди 🙂 */

margin : 0 auto ; /* выравнивание обертки по центру документа */

overflow : hidden ; /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */

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

.block span < position : relative ;

Теперь перейдем непосредственно к оформлению псевдоэлементов (будущих линий):

.block span:before <

display : block ; /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div’ом */

width : 1000px ; /* устанавливаем ширину линию. Можно использовать произвольную ширину */

content : » ; /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */

position : absolute ; /* абсолютное позиционирование для управления линиями */
border-bottom : 1px solid #000 ; /* бордер псевдо дива, т.е. сама линия */
top : 50% ; /* позиционирование по вертикали */
right : 110px ; /* позиционирование по горизонтали */
/* аналогичные стили для второго псевдоэлемента */
.block span:after < display : block ; width : 1000px ; position : absolute ; border-bottom : 1px solid #000 ; left : 110px ;

Вот собственно все. Линии слева и справа от заголовка появились, они полностью на CSS, смотряться аккуратно как на десктопе, так и на мобильных устройствах.
Демо

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

  1. Фаррух 06.05.2021 at 19:27

у меня не получилось
У меня тоже не получилось
Отлично работает.
Спасибо большое.

  • Sergey 23.04.2022 at 18:08

Рад, что материал приносит пользу! ��

спасибо за материал – хорошо изложен, только мне не совсем понятны 2 вещи: 1. что отвечает за отступ от текста 2. откуда взялись 110рх? если поясните, буду оч рада

  • Sergey 06.08.2022 at 21:40

Спасибо вам за комментарий. Относительно вопросов:
1) Если я правильно понял вопрос, то как раз именно left и right у псевдоэлементов в 110px отвечают за отступ от текста
2) 110px – это динамический отступ горизонтальных линий от текста из первого вопроса. Если будет другое слово, то отступ должен быть подобран другой. Не очень универсальное решение, согласен.

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

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