CSS sometimes can be like trying to fit puzzle made of solid color.
And by sometimes I mean almost every time.

Recently I had to make border under element which is smaller in width than the element.
That sounds fairly simple, but it took more than hour of my time so I think it have it’s place here.

First when you google, you would think that you can use the property

border-bottom-width

But guess what, that would not determine the border width, but its height/thickness. Because that makes sense somehow.

So here is the snippet, with pseudo after element and the parent –

.div {
color: #3483DF;
position: relative;
}

.div:after {
content: '';
position: absolute;
width: 50%;
left: 25%;
bottom: -20px;
border-bottom: 1px solid #3483DF;
}