Custom underline effect, other than creating a background image for it - css

Question

is there a better way to create this style of "underline" through CSS, other than creating a background image for it?
To be clear, I'm only interested in the "duplicated line" effect, a thicker and shorter line sitting directly atop a thinner and longer line of a different color. Thanks!

Answer 1

You can use pseudo elements here, i.e. :before and :after. Here, what am doing is, using an h1 element which am displaying it as inline-block. Later, we need to use CSS positioning to set both the bottom borders in place, as the borders are smaller than your element.
Later, again by using CSS positioning, we position the small border on top of the bigger one. Note that am using left: 50%; and transform: translateX(-50%) to position the border in horizontally center.
Make sure you don't miss out the z-index as it is important to use here, else the other border will render on top of the smaller one.
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
h1 {
position: relative;
display: inline-block;
font-family: Varela Round;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
color: #401f1c;
margin: 40px; /* not required, only for demo purpose */
}
h1 span {
color: #efcc4c;
}
h1:before,
h1:after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
h1:before {
bottom: -11px;
width: 40px;
border-bottom: 3px solid #efcc4c;
z-index: 1;
}
h1:after {
width: 80%;
border-bottom: 1px solid #ddd;
bottom: -10px;
}
<h1>Our <span>Services</span></h1>
Edit: Refactored my code and making the demo more precisee.

Answer 2

Try this
HTML
<div class="text">
<span>our</span>
Services
</div>
CSS
.text{
font-weight:600;
font-size:25px;
color:red;
position: relative;
display:inline-block;
}
.text::after,
.text::before{
content:"";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
margin:auto;
border-radius:5px;
height:0px;
}
.text::before{
width:100%;
border:1px solid #ccc;
}
.text::after{
width:50%;
border:2px solid red;
bottom:-6px;
}
.text span{
color:#000000;
}
Link for reference
hope this helps..

Answer 3

I always create "divider", like:
<div class='divider'>
<div class='divi-1'></div>
<div class='divi-2'></div>
<div class='divi-3'></div>
</div>
CSS:
.divider{
padding-top:15px; //or other
text-align:center;
display:block; // or column in bootstrap like col-md-12
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
.
.divider .divi-2{
display:inline-block;
height:2px;
width:50px;
background:#000000;
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
}
And that's it. You can also use vertical-align for inline-block so You have some more options to move lines verticaly ... and also it's in the flow so You know what size it have and can be sure that other elements won't overlap it.