CSS中的垂直和水平线

Question

如何使用CSS制作此行（参见图片）？

Answer 1

将pseudo element用作: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>