Задать вопрос
@luiscipher
css

Как сделать горизонтальную линию около заголовка в css?

подскажите как лучше сделать такое8a446bf3549b4689b681ef18836404a6.jpg
внутри дива заголовок, и таких несколько на странице, как сделать чтобы линия занимала все пространство в блоке справа от заголовка с учетом того что количество символов у заголовков разное
  • Вопрос задан
  • 560 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
AnnTHony
@AnnTHony
Интроверт
Много раз уже такие вопросы задавались
Ответ написан
Комментировать
Комментировать
@uralmas
Проще всего сделать следующим образом:
<div style="background:url(line.png) repeat-x;">
	<h2 style="background:#fff;">Заголовок</h2>
</div>

Но это сработает только в том случае, если задний фон однороден, если нет, то можно так:
<div>
	<h2 style="float:left;">Заголовок</h2>
	<div style="background:url(line.png) repeat-x;"></div>
</div>

Но так добавляется лишний элемент DOM
Ответ написан
3 комментария
3 комментария
Isolution666
@Isolution666
Full-Stack Developer
Подумал, что это решение поможет и вам и многим другим!

Более того, решение идеально для адаптивного дизайна, для составления содержимого, например - книги. Содержание сайта, или Карта сайта - ещё как пример для использования. Код писал сам, так что сильно не ругайте, если увидите там костыли:
<!DOCTYPE html>
<html>
    <head>
        <title>Header</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            <!--
            html, body {
                margin:0;
                padding:0;
                width: 100%;
            }
            .tes {
                width: 50%;
                margin: auto;
                margin-top: 120px;
                overflow: hidden;
                position: relative;
            }
            .m:after {
                content: '';
                position: absolute;
                margin-top: 14px;
                float: right;
                margin-left: 4px;
                width: 100%;
                border-bottom: 1px dotted rgba(0, 0, 0, 0.38);
                z-index: 0;
                display: inline-table;
            }
            .ro {
                float: right;
                position: relative;
                background: #fff;
                padding: 0px 6px 0;
                clear: both;
                z-index: 2;
            }
            -->
        </style>
    </head>
    <body>
        <div class="tes"> 
            <div class="m">TODO write content content                <span class="ro">1</span></div>
            <div class="m">TODO content                <span class="ro">2</span></div>
            <div class="m">TODO write content                <span class="ro">3</span></div>
            <div class="m">TODO write content                <span class="ro">4</span></div>
            <div class="m">TODO write content                <span class="ro">5</span></div>
        </div>
    </body>
</html>


Вот что получиться:

134e9cbab72d40d994fb5838cc54e225.png

Учите css 3, там много чего интересного можно делать ))
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Настроить интеграцию между Voximplant Kit и Dialogflow CX
06 нояб. 2024, в 03:35
5000 руб./за проект
Оптимизация ботов телеграм
06 нояб. 2024, в 00:20
1000 руб./за проект
Смарт-контракт на блокчейне TON
06 нояб. 2024, в 00:03
40000 руб./за проект
Ещё заказы