В общем у меня есть блоки с текстом, там есть заголовок и внизу контент, так вот, заголовок чуть слева, и нужно что бы после него появлялась полоса по середине до конца блока, как бы вот так:
Заголовок ----------------------------------
Разный всякий текст, много разного
всякий текст, много разного
Заголовок побольше -------------------
Разный всякий текст, много разного
всякий текст, много разного
Подскажите пожалуйста как такое можно сделать?
Ну тут по любому псевдоэлемент after, просто блок дорисовываем после заголовка и заливаем его, вот и всё по сути)
<div class="element">
<div class="head">
<div class="title">Here your first title
<div class="body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde nisi ut, odit nihil ex voluptatum quia reiciendis dolores. Reiciendis, sequi unde! Molestiae facilis quam enim optio perspiciatis quidem perferendis aperiam.
<div class="element">
<div class="head">
<div class="title">Here second
<div class="body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde nisi ut, odit nihil ex voluptatum quia reiciendis dolores. Reiciendis, sequi unde! Molestiae facilis quam enim optio perspiciatis quidem perferendis aperiam.
.element {
padding: 15px;
margin: 10px;
max-width: 300px;
border: 1px solid;
word-break: break-all;
}
.head {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 24px;
padding-bottom: 10px;
}
.head:after {
content: "";
display: block;
height: 3px;
background: blue;
flex: 1 0 0;
}
.title {
margin: 0 10px;
}
::selection {
background: white;
color: #000;
}
::-moz-selection {
background: white;
color: #000;
}
body {
background: gray;
color: black;
}