Как добавить линию за текст в css? [дубликат]
Как реализовать горизонтальную линию за текстом как на картинке? Пробовал использовать свойство box-shadow — линия появляется ниже текста на несколько пикселей. Line-height не помогает т.к. меняется междустрочный интервал, а не отступ тени. Есть какое-нибудь свойство, которое указывает отступ box-shadow? Псевдоэлемент :after применяется ко всему тексту как к блоку, а не к строкам как на фото. Как реализовать подобную линию? Заранее спасибо
Как сделать горизонтальную линию между текстом
Как задать горизонтальную линию с текстом посередине?
Всем привет! Пробую освоить верстку в html, сss, bootstrap. Столкнулся с такой задачей. Нужно.
Подскажите как сделать горизонтальную линию во всю ширину
Всех с праздником! Народ, подскажите как вставить полосу между строк в моём случае, чтобы было как.
сделать текст в одну горизонтальную линию так чтобы адаптировался как видео
видео получилось сделать адаптивным поставить расстояние между ними текст никак ещё текст под.
Необходимо сделать горизонтальную линию
Подскажите пожалуйста как сделать линию как показано на картинки 1 Код страницы HTML <!DOCTYPE.
Регистрация: 06.06.2019
Сообщений: 11
Учитывая, что в css есть свойство
1 2 3 4 5
* { margin: 0; padding: 0; font-family: Calibri; }
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
Сообщение было отмечено xpehoc как решение
Решение
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Document/title> style> * < margin: 0; padding: 0; box-sizing: border-box; >.box < display: flex; justify-content: space-between; align-items: center; max-width: 960px; margin: 0 auto; >.box .link < order: 1; padding: 10px; font: 16px/24px Calibri, sans-serif; flex-shrink: 0; >.box .title < padding: 10px; font: bold 18px/24px Calibri, sans-serif; flex-shrink: 0; text-transform: uppercase; >.box:after < content: " "; height: 1px; background-color: #ccc; flex-grow: 1; >/style> /head> body> div class="box"> div class="title">Заголовок/div> a href="#" class="link">Ссылка/a> /div> /body> /html>
Подчеркивание текста линией с градиентом
Подчеркивание текста можно сделать с помощью нескольких свойств CSS3.
| background-image: linear-gradient(to right, red, blue); | Устанавливает цвет и направление градиента |
| background-size: 100% 1px; | Высота линии |
| background-position: center bottom 2px; | Смещение от низа |
Ссылки
Пример .a-gradient < text-decoration: none; background-repeat: no-repeat; background-position: center bottom 1px; background-size: 100% 1px; background-image: linear-gradient(to right, red, blue); >.a-gradient:hover
Заголовки
Заголовки H1, H2 и т.д. придется обворачивать в т.к. свойство display: inline у элемента обязательно.
.h1-gradient < margin: 0 0 20px 0; >.h1-gradient h1 Также можно поменять направление градиента на вертикальный:
.h1-gradient h1
31.07.2018, обновлено 15.12.2022
Предыдущая запись После отправки формы сохранить позицию скролла
Следующая запись Текст с градиентом
Комментарии
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf — это конвертер HTML в PDF который.
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной.
При работе с множеством сайтов возникает необходимость в постоянном контроле срока окончания доменов и особенно.
PHP Thumb – это библиотека, основанная на PHP GD и предназначена для создания превью изображений для каталогов, товаров.
Как сделать линию под текстом css
Можно по-разному привлечь внимание читателя к тексту. Например, сделать текст жирного начертания, изменить его цвет, использовать фон, нарисовать рамку. Но что если требуется не просто выделить текст, сколько отделить один текстовый блок от другого, разделить их на разные смысловые части? Вот тут использование линий и отступов просто неоценимо.
Текстовый блок на веб-странице сильно отличается от своего печатного собрата. Главным отличием является варьируемая ширина и высота текста, которые зависят от разрешения монитора, настроек операционной системы, браузера и других подобных вещей. Данные особенности придают верстке веб-страниц определенную сложность, но при этом порождают специфичные техники, которые намного упрощают процесс создания сайта. Рассмотрим, как можно использовать стили, чтобы создать произвольную линию возле текста, независимую от его размеров.
Для создания линий используется свойство CSS — border , которое устанавливает рамку вокруг блока. В частных случаях, для создания линии лишь с одной стороны элемента, используются параметры border-bottom , border-top , border-left и border-right , они соответственно задают линию внизу, сверху, слева и справа.
Значение этих атрибутов перечисляются через пробел и сразу устанавливают тип линии, ее толщину и цвет. Стиль линии может принимать одно из восьми значений, как показано на рис. 1, а толщина задается, как правило, в пикселах.
Рис. 1. Типы линий
В примере 1 показано создание вертикальной линии рядом с текстом.
Пример 1. Вертикальная линия слева от текста
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
Чтобы стиль параграфа оставить неизменным, в данном примере введен новый класс line , который устанавливает возле параграфа вертикальную линию. Данный класс, кроме того, еще задает смещение 20 пикселов от левого края окна до текста с помощью параметра margin-left и отступ от линии до текста параметром padding-left , без него текст будет соприкасаться с линией слишком плотно (рис. 1).
Рис. 1. Линия возле текста
Точно также линии можно создавать для любых блочных элементов (теги , , ), а также для встроенных элементов (тег ), как показано в примере 2.
Пример 2. Горизонтальная линия внизу текста
< span >Lorem ipsum dolor sit amet , consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан ниже (рис. 2).
Рис. 2. Горизонтальная линия под текстом
По аналогии с примером, линии в тексте можно отрисовывать везде, где есть такая необходимость — внизу текста, вверху, справа или слева от него.