How make text-decoration: underline with 2px padding?

Question

I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?

PS Yeahh guys, I know about div

Answer 1

A great way to do this without adding and extra spans and having more control is using the :after selector.

Useful especially for navigation menus:

.active a:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

If you want more or less space between the text and the underline, add a margin-top.

If you want a thicker underline, add more height:

.active a:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}