使用:after在跨越元素区域其余部分的文本之后添加关键字

Question

我正在尝试向description list DT元素添加关键字。

其思想是，DT元素中的文本后面的键线将您的眼睛引向DD元素。

请看我下面的设计。

​

​

我原以为使用:after会很容易做到，但现在我对如何让它工作感到困惑。

请看下面的代码，如果有人能分享他们的智慧，那就太棒了。

JSfiddle在这里也是https://jsfiddle.net/joshmoto/x4ua3epm/

​

@import 'http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css';
@import url('https://fonts.googleapis.com/css?family=Exo:400,500,600,700');

BODY {
  background: #e9e9e9;
  font-family: 'Exo', sans-serif;
}

DT {
  text-transform: uppercase;
  letter-spacing: .05rem;
}

DT:after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  background: #b6b6b6;
}

<div class="container">

  <dl class="row mt-3 mb-3">

    <dt class="col-4">Foreword</dt>
    <dd class="col-8">Carmelo Ezpeleta – CEO Dorna Sports</dd>

    <dt class="col-4">The Season</dt>
    <dd class="col-8">An overview by Mat Oxley</dd>

    <dt class="col-4">Technical Review</dt>
    <dd class="col-8">Mat Oxley</dd>

    <dt class="col-4">The Bikes</dt>
    <dd class="col-8">A two-page focus on each of the bikes from Aprilia, Ducati, Honda, KTM, Suzuki, and Yamaha</dd>

    <dt class="col-4">The Riders</dt>
    <dd class="col-8">A detailed account of each rider’s season</dd>

    <dt class="col-4">The Races</dt>
    <dd class="col-8">Eight-pages per MotoGP round report including detailed results data</dd>

    <dt class="col-4">Moto2</dt>
    <dd class="col-8">A five-page season round-up</dd>

    <dt class="col-4">Moto3</dt>
    <dd class="col-8">A five-page season round-up</dd>

    <dt class="col-4">Red Bull Rookies Cup</dt>
    <dd class="col-8">The season in review</dd>

    <dt class="col-4">Two Wheels for Life</dt>
    <dd class="col-8">Update on the year</dd>

    <dt class="col-4">Champions</dt>
    <dd class="col-8">A history of Grand Prix Champions</dd>

  </dl>

</div>

​

非常感谢

Answer 1

我用下面的代码更新了你的css，并为我工作

DT {
  text-transform: uppercase;
  letter-spacing: .05rem;
  overflow: hidden; // new property

  &:after {
    content: '';
    display: inline-block; //changed from block to inline-block
    height: 1px;
    width: 100%;
    position: absolute;
    background: #b6b6b6;
    margin-top: 10px; //for top spacing 
    margin-left: 5px; //for left spacing
  }

}

如果有帮助就告诉我，