h2 之后的 CSS 行

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>

Answer 2

你不必对标题做任何事情（h2等）：

h2:after {
    width: 40px;
    height: 1px;
    background: #fff;
    position: relative;
    content: "";
    display: block;
    margin: 20px 0;
}