Как сделать текст-ссылку со стилизованным подчеркиванием?

Question

[Yrossia]

как сделать такой же текст-ссылку(я не знаю даже как сделать кнопкой или ссылкой) со стилизованным подчеркиванием, ну и само-собой нужно что-бы менялось состояние подчеркивания при клике на разные элементы

Answer 1

[Юрий]

такое делается нижней границей
border-bottom
у нее можно и цвет и толщину и эффекты задать. в отличие от text-decoration: underline

Answer 2

[maaGames]

pcvector.net/scripts/menu_and_navigation/436-laval...

Answer 3

[Елена]

В варианте с нижним бордером нужно правильно подобрать 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; }