*лучший вариант у
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;
Может быть, способы не идеальные, и меня ещё поправят комментаторы
Простой
Простой