CSS (bootstrap) line after blue border (with example) - css

Question

I'm learning css have the current code.
.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;
}
<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>
https://jsfiddle.net/jhqwbghp/1/
So far I've gotten the blue bar I want, but I can't add the line above the article to make it look like this:
How would I do this to match the picture I provided?

Answer 1

I would separate each article into its own li. You can then apply a border-top to each li which will give you the separation lines and then you can use first-child to apply a pseudo element to the first list item, which will give you the blue underline. You could do something like this:
.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>
Note that I fixed some spelling errors in both your HTML and CSS

Answer 2

I just added
border-bottom: 1px solid #ddd;
CSS rule to .gw_content_title element.
.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;
}
<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>

Answer 3

you could use a hr and then style the hr with css:
<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>
or us a css border top:
.newsBox {
border-bottom : 4px solid #476DA5;
width: 50px;
}
.box {
border-top : solid 1px #333333;
width: 50%;
}
<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>