Вертикальные и горизонтальные линии в CSS

Question

Как сделать эту строку (см. Рисунок) с помощью CSS?

Answer 1

Использование псевдоэлемента в качестве :after

div{
height:80px;
width:3px;
background:black;
border-radius: 23%;
position:relative;
}
div:after{
content:'';
height:3px;
width:170px;
background:black;
border-radius: 23%;
position:absolute;
top:47%;
}

<div></div>

Answer 2

Не требуется сложный код, достаточно одного элемента и нескольких строк CSS:

.line {
  width:200px;
  height:100px;
  border-left:5px solid;
  background:linear-gradient(#000,#000) center/100% 5px no-repeat;
}

<div class="line">
</div>

Или вот так:

.line {
  width:200px;
  height:100px;
  padding:48px 0;
  box-sizing:border-box;
  border-left:5px solid;
  background:#000 content-box;
}

<div class="line">
</div>

Answer 3

.line1 {
  height:150px;
  width:3px;
  background:#000;
  position:relative;
}

.line2 {
  height:5px;
  width:300px;
  background:#000;
  position:absolute;
/* following 2 code is excellent center  for second line. */
  top:50%;
  transform:translateY(-50%);
}

<div class="line1">
  <div class="line2"></div>
</div>