Достижение этого элемента hr с помощью стиля CSS - псевдоэлементы
У меня возникли некоторые трудности с поиском решения для стиля элемента hr в соответствии с моими предпочтениями.
Если вы посмотрите на следующую скрипку, вы увидите, что к элементу hr добавлены оба псевдос: before и: after.
http://jsfiddle.net/MattStrange/LGEjp/
Пока это то, что я хочу, оба круга с обеих сторон правильные, но теперь я хочу добавить изображение к точному центру линии, но поскольку оба псевдосигнала занятыЯ не уверен, как добавить фоновое изображение к этому часу.
hr {
border: 0 solid #eeedef;
border-top-width: 1px;
height: 0;
margin-top: 60px;
margin-bottom: 60px;
float: left;
clear: both;
display: block;
width: 100%;
position: relative;
}
hr:before, hr:after {
content: " ";
width: 5px;
height: 5px;
position: absolute;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid #e5e5e5;
background-color: #fff;
}
hr:before {
left: 0;
bottom: -3px;
}
hr:after {
bottom: -3px;
right: 0;
}
Помощь очень ценится.
ура