Задать вопрос
EgorKubasov
@EgorKubasov
html

Как сделать линии до и после текста в html css (картинка прилагается)?

Здравствуйте!
Задался вопросом как сделать такую вещь:

Отступы слева и справа статичные, а средняя линия в зависимости от длинны текста должна меняться. Подскажите, как реализовать?
  • Вопрос задан
  • 78886 просмотров
Комментировать
Подписаться 16 Оценить Комментировать
Решения вопроса 1
d4rkr00t
@d4rkr00t
Самый простой способ, как-то так: jsfiddle.net/JF38F/

С абсолютным позиционирование поверх линии
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 6
ishaba
@ishaba
kizu.ru/fun/legends-and-headings/
Ответ написан
Комментировать
Комментировать
Vorchun
@Vorchun
Еще вариант artgorbunov.ru/bb/soviet/20121115/
Ответ написан
Комментировать
Комментировать
Dimitriys
@Dimitriys
stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line выбирайте что больше подуше
Ответ написан
Комментировать
Комментировать
@AlexRas
С помощью before и after.

Тут подробнее: frontblog.ru/verstka-zagolovoka-s-liniyami-po-boka...
Ответ написан
Комментировать
Комментировать
@covorp
использую такое:
CSS
.center{margin:0 auto;text-align:center} /*если нужно центровать */
.lntxt {overflow:hidden}
.lntxt:before,.lndot:after {
	content:'';display:inline-block;vertical-align:middle;
	box-sizing:border-box;width:100%;height:2px;
	background:rgb(230,235,235); 
	border:solid #FFF;
	border-width:0 .5em 0;
}
.lntxt:before {margin-left:-100%}
.lntxt:after {margin-right:-100%}

HTML
<h2 class="center lntxt">ЗАГОЛОВОК «ПО ЦЕНТРУ»</h2>
<h3 class="lntxt">ЗАГОЛОВОК «СЛЕВА»</h3>
Ответ написан
1 комментарий
1 комментарий
leutsky
@leutsky
Проще так: cssdesk.com/M6WzU
А резину так: cssdesk.com/tRe9r
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
2500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы