h2之后的CSS Line

Question

标题------------------------

您好，

我需要能够在h2标签之后添加一行，响应标题的长度不同。想知道这是否可以通过CSS？

这是我目前的代码：

h2:after { 
  border-top: 1px solid #333; 
  content: ""; 
  margin: 0px auto; 
  position: absolute; 
  top: 50%; 
  left: 0px; 
  right: 0px; 
  bottom: 0px; 
  width: 95%; 
  z-index: -1; 
}

Answer 1

h2 {
  overflow: hidden;
  position: relative;
}
h2::after {
  content: '';
  width: 100%;
  height: 1px;
  background: red;
  position: absolute;
  top: 50%;
  margin-left: 1rem;
}

<h2>Some Text</h2>
<h2>Lorem ipsum dolor sit amet, consectetur</h2>