ShortBottomBorder

Make the border-bottom width smaller than the div

by Sivard Donkers

HTML

<div class="widget-wrapper">
    <div class="widget-title">Widget Titel</div>
</div>

CSS

body{
    font-family:arial;
    font-size:16px;
    color:#000;
}
.widget-wrapper{
    width:200px;
    text-align:center;
}
.widget-title{
    position:relative;
    border-bottom:2px solid green;
}

.widget-title::after{
    position:absolute;
    width:50%;
    height:2px;
    background:red;
    content:'';
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}