蓝色边框后的CSS（bootstrap）行（带示例）

Question

我学习css有当前的代码。

＆＃13;

＆＃13;

.nav-item {
  padding-left: 2rem !important;
}

.gutterwire-main-content {
  margin-top: 1rem;
}

.gw_content_title {
  padding: 7px;
  position: relative;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
  transition: background-color .3s;
  font-family: CNN, Helvetica Neue, Helvetica, Arial, Utkal, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-size: 1.0666666667rem;
  line-height: 1.375;
}

.gw_content_title:after {
  background-color: #3061f3;
  bottom: 0;
  content: "";
  height: .25rem;
  left: 0;
  position: absolute;
  -webkit-transition: width .2s ease-in-out;
  -o-transition: width .2s ease-in-out;
  transition: width .2s ease-in-out;
  width: 1rem;
}

.gw--extra-small {
  border-top: 1px solid #d9d9d9;
}

.lastest-gutters li {
  list-style: none;
  margin-bottom: 2rem !important;
  padding: 0;
}

＆＃13;

<div class="lastest-gutters col-sm-6 col-md-3">
  <h2 class="gw_content_title">Lastest news</h2>
  <ul>
    <li>
      <article style="border:1px solid red; margin-bottom:20px">
        ddddddd
      </article>

      <article style="border:1px solid red; margin-bottom:20px">
        ddddddd
      </article>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/jhqwbghp/1/

到目前为止，我已经得到了我想要的蓝条，但我无法在文章上方添加该行，使其看起来像这样：

我如何才能与我提供的图片相匹配？

Answer 1

您可以使用hr然后使用css：

设置hr的样式

＆＃13;

＆＃13;

  

<hr>

<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<hr>

<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<hr>

<p>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

＆＃13;

＆＃13;

＆＃13;

或者我们是css border top：

＆＃13;

＆＃13;

.newsBox {
  border-bottom : 4px solid #476DA5;
  width: 50px;
}

.box {
  border-top : solid 1px #333333;
  width: 50%;
}

＆＃13;

<div class="newsBox">
  <h2>News</h2>
</div>

<div class="box">
  <p>dolor sit amet, consectetur adipisicing elit, sed      do eiusmod tempor incididunt ut labore et dolore        magna aliqua.</p>
</div>

<div class="box">
  <p>dolor sit amet, consectetur adipisicing elit, sed      do eiusmod tempor incididunt ut labore et dolore        magna aliqua.</p>
</div>

<div class="box">
  <p>dolor sit amet, consectetur adipisicing elit, sed      do eiusmod tempor incididunt ut labore et dolore        magna aliqua.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会将每篇文章分成自己的li。然后，您可以将border-top应用于每个li，这将为您提供分隔线，然后您可以使用first-child将伪元素应用于第一个列表项，这将为您提供蓝色下划线。你可以这样做：

.nav-item{
  padding-left: 2rem !important;
}

.gutterwire-main-content {
  margin-top: 1rem;
}

.gw_content_title {
  padding: 7px;
  position: relative;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
  transition: background-color .3s;
  font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-size: 1.0666666667rem;
  line-height: 1.375;
}

.gw--extra-small {
  border-top: 1px solid #d9d9d9;
}

.latest-gutters ul {
  margin:0;
  padding:0 0 0 7px;
}

.latest-gutters li {
  list-style: none;
  padding:1rem 0;
  border-top:1px solid #d9d9d9;
  position:relative;
}
  .latest-gutters li:first-child:before {
    background-color: #3061f3;
    top:-.25rem;
    content: "";
    height: .25rem;
    left: 0;
    position: absolute;
    -webkit-transition: width .2s ease-in-out;
    -o-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
    width: 1rem;
  }

<div class="latest-gutters col-sm-6 col-md-3">
  <h2 class="gw_content_title">Latest news</h2>
  <ul>
    <li>
      <article>ddddddd</article>
    </li>
    <li>
      <article>ddddddd</article>
    </li>
  </ul>
</div>

请注意，我修复了HTML和CSS中的一些拼写错误

Answer 3

我刚刚添加了

border-bottom: 1px solid #ddd;

CSS规则.gw_content_title元素。

＆＃13;

＆＃13;

  .nav-item{
      padding-left: 2rem !important;
      }

      .gutterwire-main-content {
          margin-top: 1rem;
      }

      .gw_content_title {
          padding: 7px;
          position: relative;
          -webkit-transition: background-color .3s;
          -o-transition: background-color .3s;
          transition: background-color .3s;
          font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
          font-weight: 700;
          -webkit-font-smoothing: antialiased;
          font-size: 16px;
          font-size: 1.0666666667rem;
          line-height: 1.375;
          border-bottom: 1px solid #ddd; /* Right here! */
       }

      .gw_content_title:after {
          background-color: #3061f3;
          bottom: 0;
          content: "";
          height: .25rem;
          left: 0;
          position: absolute;
          -webkit-transition: width .2s ease-in-out;
          -o-transition: width .2s ease-in-out;
          transition: width .2s ease-in-out;
          width: 1rem;
       }

       .gw--extra-small {
          border-top: 1px solid #d9d9d9;
       }

       .lastest-gutters li{
         list-style: none;
         margin-bottom: 2rem !important;
         padding: 0;
       }

＆＃13;

<div class="lastest-gutters col-sm-6 col-md-3">
          <h2 class="gw_content_title">Lastest news</h2>
          <ul>
            <li>
              <article style="border:1px solid red; margin-bottom:20px">
                ddddddd
              </article>
              
              <article style="border:1px solid red; margin-bottom:20px">
                ddddddd
              </article>
            </li>
          </ul>
        </div>

＆＃13;

＆＃13;

＆＃13;