@torielll

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

efa1658fc8474d0fa7d50ec712ad0d7b.png
суть в том что надо чтобы линии тянулись на всю длину блока, заранее спасибо.
  • Вопрос задан
  • 4088 просмотров
Решения вопроса 1
evgeniy8705
@evgeniy8705
Повелитель вселенной
Пригласить эксперта
Ответы на вопрос 1
@Sanitar88
Студень
*лучший вариант у 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;


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

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

Похожие вопросы