Как сделать разделительные линии с помощью ::before?

Question

[torielll]

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

Answer 1

[gleendo]

https://jsfiddle.net/oa5w3d31/3/

Comments

[torielll]

спасиб)

Answer 2

[Егор Неведов]

*лучший вариант у evg_ в комментариях

Полоску можно добавить так:

#block {
position: relative; /* для использования абсолютного позиционирования у дочернего относительно этого блока */
}
#block::before {
content: ""; /* создаём инлайн объект */
display: block; /* преобразуем его в блочный */
position: absolute; /* включаем асболютное позиционирование */
top: 0px; /*отступ будет 0 пикселей от верхней точки блока */
width: 100%; /* блок займёт по ширине 100% ширины родительского */
height: 1px; /* высота самого блока */
background: #ccc; /* задаём нужный цвет фоном */
}

Кружок можно сделать отдельным объектом в ::after, установив

content: "";
display: block;
position: absolute;
height:10px;
width:10px;
border:1px solid #ccc;
border-radius: 5px;
top: 0px;
margin-top: -5px;

Альтернативно, всё то же самое можно сделать в одном блоке ::before или ::after, если использовать верхний пример, но задать полную высоту, например height:10px и в качестве фона поставить 2 картинки, первую для линии, можно 1х1px, центрировать по высоте и повторить на всю ширину, вторую для кружка 12х10 с прозрачностью в центре в png24, центрировать

background: url(img/bg1.png) center repeat-x,
                     url(img/bg2.png) no-repeat center center;

Может быть, способы не идеальные, и меня ещё поправят комментаторы

Comments

[gleendo]

Егор Неведов И будет под кругом видна линия...Да и круг с 5px радиусом скругления не получится кажется...Да и без content круга вообще не будет...
И на счет счет позиционирования. Не легче ли указать смещение и линии и круга? зачем отрицательный margin? Да и при таких условиях круг будет выходить за пределы блока. А линии вовсе не видно будет, если она по background будет совпадать с цветом рамки блока.

[gleendo]

Егор Неведов Ооо...а на счет картинок то это уже край. Не стоит для таких вещей использовать еще и дополнительную графику, да еще и парить мозг с форматом и прозрачностью.
Если что, то это адекватная критика)

[gleendo]

Егор Неведов Идеальный способ:) https://jsfiddle.net/oa5w3d31/3/

[Егор Неведов]

evg_ круг получится, content - поправил, конечно, я имелл его ввиду. Только да, линия видна будет.. если и закрыть ещё фоном, отступов от него не будет(
Согласен насчёт картинок - не очень, но что ещё остаётся, svg? canvas?))
Jsfiddle меня не любит видимо из-за адблока и периодически не работает( Что в вашем примере?

[Егор Неведов]

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