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

Используя CSS, когда текст имеет text-decoration:underline применяется text-decoration:underline , возможно ли увеличить расстояние между текстом и подчеркиванием?

    Нет, но вы можете пойти с чем-то вроде border-bottom: 1px solid #000 и padding-bottom: 3px .

    Если вам нужен тот же цвет «подчеркивания» (который в моем примере является границей), вы просто не указываете декларацию цвета, то есть border-bottom-width: 1px и border-bottom-style: solid .

    Для многострочных вы можете обернуть многострочные тексты в промежутке внутри элемента. Например, insert multiline texts here затем просто добавьте border-bottom и padding на – Demo

    Проблема с непосредственным использованием border-bottom заключается в том, что даже с padding-bottom: 0 , подчеркивание имеет тенденцию быть слишком далеко от текста, чтобы хорошо выглядеть. Таким образом, мы все еще не имеем полного контроля.

    Одним из решений, которое дает вам точность пикселей, является использование :after псевдоэлемента:

     a { text-decoration: none; position: relative; } a:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; } 

    Изменяя bottom свойство (отрицательные числа прекрасны), вы можете позиционировать подчеркивание именно там, где вы хотите.

    Одна из проблем с этим методом, чтобы остерегаться, заключается в том, что он ведет себя немного странно с обводками строк.

    Вы можете использовать эту text-underline-position: under

    Подробнее см. Здесь: https://css-tricks.com/almanac/properties/t/text-underline-position/

    См. Также совместимость браузеров .

    Вдаваясь в детали визуального стиля text-decoration:underline в значительной степени бесполезно, так что вам придется идти с каким-то взломом, удаляет text-decoration:underline и заменяет его чем-то другим, пока волшебный далеко -устойчивая будущая версия CSS дает нам больше контроля.

    Это сработало для меня:

     a { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) 81%, #222222 81.1%, #222222 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) ); text-decoration: none; } 
    • Отрегулируйте значения% (81% и 85%), чтобы изменить, как далеко линия от текста
    • Отрегулируйте разницу между двумя значениями%, чтобы изменить толщину линии
    • отрегулируйте значения цвета (# 222222), чтобы изменить цвет подчеркивания
    • работает с несколькими линейными элементами
    • работает с любым фоном

    Вот версия со всеми проприетарными свойствами для некоторой обратной совместимости:

     a { /* This code generated from: http://colorzilla.com/gradient-editor/ */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */ text-decoration: none; } 

    Обновление: версия SASSY

    Для этого я сделал scss mixin. Если вы не используете SASS, обычная версия выше по-прежнему отлично работает …

     @mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) $top, $color $top + 0.1%, $color $bottom, rgba(0,0,0,0) $bottom + 0.1%, rgba(0,0,0,0) ); text-decoration: none; } 

    затем используйте его так:

     $blue = #0054a6; a { color: $blue; @include fake-underline(lighten($blue,20%)); } a.thick { color: $blue; @include fake-underline(lighten($blue,40%), 86%, 99%); } 

    Обновление 2: подсказка опускателя

    Если у вас сплошной цвет фона, попробуйте добавить тонкий text-stroke или text-shadow в том же цвете, что и ваш фон, чтобы сделать descenders красивым.

    кредит

    Это упрощенная версия метода, который я изначально нашел на https://eager.io/app/smartunderline , но с тех пор статья была снята.

    Я знаю, что это старый вопрос, но для display: inline-block одной строки текста display: inline-block а затем установка height работала хорошо для меня, чтобы контролировать расстояние между границей и текстом.

    @ ответ последнего ребенка – отличный ответ!

    Однако добавление границы к моему H2 привело к подчеркиванию дольше, чем текст.

    Если вы динамически пишете свой CSS, или, как и мне, вам повезло и знаете, что текст будет, вы можете сделать следующее:

    1. измените content на что-то правильную длину (то же самое

    2. текст) установите цвет шрифта transparent (или rgba(0,0,0,0) )

    для подчеркивания

    Processing

    (например), измените код последнего ребенка:

     a { text-decoration: none; position: relative; } a:after { content: 'Processing'; color: transparent; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; } 

    Посмотри на мою скрипку .

    Вам нужно будет использовать свойство width width и свойство padding. Я добавил анимацию, чтобы она выглядела круче:

     body{ background-color:lightgreen; } a{ text-decoration:none; color:green; border-style:solid; border-width: 0px 0px 1px 0px; transition: all .2s ease-in; } a:hover{ color:darkblue; border-style:solid; border-width: 0px 0px 1px 0px; padding:2px; } - body{ background-color:lightgreen; } a{ text-decoration:none; color:green; border-style:solid; border-width: 0px 0px 1px 0px; transition: all .2s ease-in; } a:hover{ color:darkblue; border-style:solid; border-width: 0px 0px 1px 0px; padding:2px; } - body{ background-color:lightgreen; } a{ text-decoration:none; color:green; border-style:solid; border-width: 0px 0px 1px 0px; transition: all .2s ease-in; } a:hover{ color:darkblue; border-style:solid; border-width: 0px 0px 1px 0px; padding:2px; } 
     Somewhere ... over the rainbow (lalala) , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a what a wonder-ful world! World! 

    Альтернатива многострочным текстам или ссылкам, вы можете обернуть ваши тексты в промежутке внутри элемента блока.

      insert multiline texts here  

    то вы можете просто добавить border-bottom и padding на .

     a { width: 300px; display: block; } span { padding-bottom: 10px; border-bottom: 1px solid #0099d3; line-height: 48px; } 

    Вы можете обратиться к этой скрипке. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

    Если ты хочешь:

    • многострочный
    • пунктирный
    • с пользовательским нижним дополнением
    • без оберток

    подчеркивание, вы можете использовать 1-пиксельное фоновое изображение с repeat-x и 100% 100% положение:

     display: inline; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%; 

    Вы можете заменить второй 100% на что-то еще, например px или em чтобы отрегулировать вертикальное положение подчеркивания. Также вы можете использовать calc если хотите добавить вертикальное заполнение, например:

     padding-bottom: 5px; background-position-y: calc(100% - 5px); 

    Конечно, вы также можете создать собственный шаблон png base64 с другим цветом, высотой и дизайном, например здесь: http://www.patternify.com/ – просто установите квадратную ширину и высоту в 2×1.

    Источник вдохновения: http://alistapart.com/article/customunderlines

    Я смог сделать это с помощью U (Underline Tag)

     u { text-decoration: none; position: relative; } u:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; }  
    Shop Now

    Это то, что я использую:

    HTML:

     
    GET IN TOUCH

    CSS:

     .horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; } 
    Interesting Posts

    Как найти имя контакта с номера телефона на Android?

    В MS Access, как форма может предоставить раскрывающееся меню с данными из связанной формы?

    155 ГБ на диске c израсходовано. 50 ГБ используется в минутах. Windows 7

    Как реализовать setOnScrollListener в RecyclerView

    Сигнал EOF в терминале mac osx

    Выберите полное имя файла при переименовании в Windows

    Прекратить сохранение фотографий с помощью встроенной камеры Android

    Поддерживает ли C ++ «наконец» блоки? (И что это за «RAII», о котором я все время слышу?)

    Легко переключаться между Mac и ПК каждый день

    Как установить тайм-аут запроса для одного действия controllerа в приложении asp.net mvc

    Невозможно выполнить загрузку после удаленного системного зарезервированного раздела

    java.lang.SecurityException: нарушение герметизации:

    Разница между + и & для присоединения строк в VB.NET

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

    Почему камни установлены в каталоге с другой версией Ruby, чем я запускаю?

    Давайте будем гением компьютера.