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;
}
