lastnoob lastnoob - 1 year ago 135
CSS Question

How to achieve this underline or bottom border effect without editing line-height?

like the orange underline here

I would like to achieve this underline, but without messing the line height.

If I use text-decoration:underline; its too close to the text, not visually appealing, and if I use bottom-border its too far away and on the edge because of line height.

Is there any other HTML&CSS solution or workaround except changing the line height?

mat mat
Answer Source

I sometimes use an :after or :before pseudo element for that sort of thing. That way I can be knit picky about how far away it is.

The pseudo element can be absolute positioned to ensure that.

So for a general example:

.nav-bar-item:after {
    content: '';
    position: absolute;
    bottom: 8px;
    height: 4px;
    width: 100%;
    background-color: orange;
    display: none;
.nav-bar-item:hover:after {
    display: block;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download