如何在样式之前为li添加样式

时间:2018-10-26 11:34:40

标签: html css twitter-bootstrap bootstrap-4

这是时间线图表,我必须在每个li元素之前绘制一个圆圈。

ul.timeline>li:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #22c0e8;
  left: 20px;
  width: 20px;
  height: 20px;
  z-index: 400;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5 mb-5">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <h4>Latest News</h4>
      <ul class="timeline">
        <li>
          <a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
          <a href="#" class="float-right">21 March, 2014</a>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
        </li>
        <li>
          <a href="#">21 000 Job Seekers</a>
          <a href="#" class="float-right">4 March, 2014</a>
          <p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
        </li>
        <li>
          <a href="#">Awesome Employers</a>
          <a href="#" class="float-right">1 April, 2014</a>
          <p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
        </li>
      </ul>
    </div>
  </div>
</div>

如何更改HTML元素上边框的颜色?

下面是完整的示例:https://bootsnipp.com/snippets/featured/simple-vertical-timeline

3 个答案:

答案 0 :(得分:0)

我想您想在两个蓝色圆圈之间添加边框,还希望删除默认的ul样式。

我在您的代码中添加了一些css代码。在下面查看。

  • 要删除默认的ul样式,我添加了list-style-type作为 none
  • 要添加连接列表项的垂直线,我 已将伪类元素:before添加到ul.timeline

ul.timeline {
    list-style-type: none;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline>li:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #22c0e8;
  left: 20px;
  width: 20px;
  height: 20px;
  z-index: 400;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5 mb-5">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <h4>Latest News</h4>
      <ul class="timeline">
        <li>
          <a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
          <a href="#" class="float-right">21 March, 2014</a>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
        </li>
        <li>
          <a href="#">21 000 Job Seekers</a>
          <a href="#" class="float-right">4 March, 2014</a>
          <p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
        </li>
        <li>
          <a href="#">Awesome Employers</a>
          <a href="#" class="float-right">1 April, 2014</a>
          <p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
        </li>
      </ul>
    </div>
  </div>
</div>

答案 1 :(得分:0)

您可以仅使用Bootstrap类(无需额外的CSS)来创建时间轴。 border实用程序类用于创建行。

    <!-- timeline item -->
    <div class="row">
        <!-- timeline item 1 left dot -->
        <div class="col-auto text-center flex-column d-none d-sm-flex">
            <div class="row h-50">
                <div class="col">&nbsp;</div>
                <div class="col">&nbsp;</div>
            </div>
            <h5 class="m-0">
                <span class="badge badge-pill bg-light border">&nbsp;</span>
            </h5>
            <div class="row h-50">
                <div class="col border-right">&nbsp;</div>
                <div class="col">&nbsp;</div>
            </div>
        </div>
        <!-- timeline item 1 event content -->
        <div class="col py-2">
            <div class="card">
                <div class="card-body">
                    Timeline item content....
                </div>
            </div>
        </div>
    </div>

https://www.codeply.com/go/AX0ugyF5Vd

答案 2 :(得分:-1)

您可以将边框颜色更改为任何所需的颜色 请检查此屏幕截图,我们将在实际示例中对其进行更改

https://irfan-ranksol.tinytake.com/sf/MzAzMzMyN185MDkxMDMx