How to make border smaller than div

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


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;