В варианте с нижним бордером нужно правильно подобрать line-height, чтобы выглядело как стандартное подчеркивание. В примере вероятнее всего это , и имеет padding, если применять border непосредственно к
<a> , то линия будет шире слова. Чтобы этого не возникало, нужно само слово обернуть в span:
<span>Home</span> или любой строчный контейнер, и задать ему уже border-bottom, line-height и чтобы работала высота строки - display: inline-block, при наличии соседнего текста в строке еще и vertical-align: baseline, чтобы выделенное слово по высоте букв осталось на общей линии строки
Пример:
a > span { border-bottom: 1px solid red;
display: inline-block;
line-height: 0.7;
vertical-align: baseline; }