Ответы пользователя по тегу Веб-разработка
  • Как сделать текст-ссылку со стилизованным подчеркиванием?

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