Как верстать подобный элемент?

Question

[webhero]

Answer 1

[Андрей Федоров]

Вот вариант попроще... https://codepen.io/aliencash/pen/GdGPXM

Comments

[webhero]

интересный подход

Answer 2

[archelon]

можно так (элемент + 2 псевдоэлемента)
ну или картинкой.

.myblock {
  background-color: #008ae9;
  width:14px;
  height:14px;
  border-radius:50%;
  content:"";
  margin:0 auto;
  position:relative;
}
.myblock:before {
    content:"";
    background-color: #008ae9;
    position:absolute;
    height:2px;
    width:70px;
    left:-80px;
    top:6px;
}
.myblock:after {
    content:"";
    background-color: #008ae9;
    position:absolute;
    height:2px;
    width:70px;
    right:-80px;
    top:6px;
}

https://jsfiddle.net/vvgw1fah/1/

Comments

[Владимир Соломыкин]

зачем абсолютное, если относительное даст нормальное тело элементу?

Answer 3

[Максим]

https://codepen.io/topicstarter/pen/BxVvOr?editors=1100 переделал