标题后的行（css）

Question

如何创建这样的行？ （查看截图评论）

我已经尝试在h1之后创建一个新div，然后用

设置它

     margin-left: 70px;
     border-top: solid 2px #ffffff;
     width: 46.4%;
     margin-top: -27px;
     position: absolute;

但是这条线不够长......

如何最巧妙地制作这些线条？所以他们和div一样长，他们放在哪里。而且没有让移动网站太宽？

Answer 1

你可以使用：在伪元素之后不添加像这样的任何div

h2 {
  position: relative;
}

h2:after {
  position: absolute;
  top: 50%;
  content: "";
  height: 1px;
  background-color: #000;
  width: 100%;
  margin-left: 10px;
}

Demo