代码之家 › 专栏 › 技术社区 › joshmoto

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

css

joshmoto · 技术社区 · 7 年前

我正在尝试将关键字添加到描述列表中。 dt element.

其想法是,关键线跟随 dt->element中的文本,该元素将您的眼睛引导至 dd->element.

请看下面我的设计…


   
    
     
      
       
      
     
     
      我认为使用
      
       :after可以很容易地做到,但我对如何使它现在工作感到困惑。
      
     
     
      
      
     
     
      
       请参阅下面的代码,如果有人能分享他们的智慧,那将是了不起的。
      
     
     
      
      
     
     
      
       jspiddle here too
       
        https://jsfiddle.net/joshmoto/x4ua3epm/
       
      
     
     
      
      
      
       
        @import'http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css';
@导入URL(“https://fonts.googleapis.com/css”?家族=外显子:400500600700’;

身体{
背景:E9E9E9;
字体系列:“exo”,无衬线;
}

dt{
文本转换:大写;
字母间距:.05rem;
}

DT:{后
内容:
显示:块;
高度:1px;
宽度:100%;
位置:绝对;
背景:B6B6B6;
}<代码> < /PRE>

<dl class=“行MT-3 MB-3”>

<dt class=“col-4”>前言</dt>
<dd class=“col-8”>Carmelo Ezpeleta_“首席执行官Dorna Sports</dd>

<dt class=“col-4”>季节</dt>
<dd class=“col-8”>Mat Oxley的概述</dd>

<dt class=“col-4”>技术审查</dt>
<dd class=“col-8”>Mat-Oxley</dd>

<dt class=“col-4”>自行车</dt>
<dd class=“col-8”>从Aprilia、Ducati、Honda、KTM、Suzuki和Yamaha购买的每辆自行车都有两页的焦点</dd>

<dt class=“col-4”>骑手</dt>
<dd class=“col-8”>每个骑手的详细帐户</dd>

<dt class=“col-4”>比赛</dt>
<dd class=“col-8”>每个Motogp圆形报告8页,包括详细结果数据</dd>

<dt class=“col-4”>马达2</dt>
<dd class=“col-8”>五页的季节性总结</dd>

<dt class=“col-4”>MOTO3</dt>
<dd class=“col-8”>五页的季节性总结</dd>

<dt class=“col-4”>红牛新秀杯</dt>
<dd class=“col-8”>回顾中的季节</dd>

<dt class=“col-4”>终身两轮</dt>
<dd class=“col-8”>年度更新</dd>

<dt class=“col-4”>冠军</dt>
<dd class=“col-8”>大奖赛冠军的历史</dd>

&l/dl& gt;

</DIV>.
       
      
      
       多谢把你的眼睛引到
       
        DD
       
       元素。
      
      
       请看下面我的设计…
      
      
       
        
       
      
      
      
      
       我想用它很容易
       
        :after
       
       但我现在对如何使它发挥作用感到困惑。
      
      
       看看下面的代码,如果有人能分享他们的智慧,那就太棒了。
      
      
       J这里也有小提琴
       
        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>
       
      
      
       多谢

1 回复 | 直到 7 年前

Uli 7 年前

我用下面的代码更新了你的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
  }

}

如果有帮助请告诉我,