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

Question

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

Answer 1

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

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

Для многострочных вы можете обернуть многострочные тексты в промежутке внутри элемента. Например. <a href="#"><span>insert multiline texts here</span></a> затем просто добавить border-bottom и padding на <span> - Demo

Answer 2

Проблема с использованием 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 (отрицательные числа в порядке), вы можете расположить подчеркивание именно там, где вы хотите.

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

Answer 3

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

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

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

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

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

подчеркнуть <h2>Processing</h2> (к примеру), изменения кода LAST-ребенку быть:

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; 
} 

Answer 4

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

Answer 5

Входящие в детали визуального стиля 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; 
} 

Update: SASSY версия

Я сделал SCSS подмешать для этого. Если вы не используете 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%); 
} 

Update 2: Спусковые Совет

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

Кредит

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

Answer 6

Просмотреть мои fiddle.

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

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; 
 
}

<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>

Answer 7

Если вы хотите:

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

подчеркивание, вы можете использовать -высоту пиксельных фонового изображение с 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); 

Конечно, вы также можете сделать свой собственный Base64 PNG шаблон с другим цветом, высотой и дизайном, например, здесь: http://www.patternify.com/ - только что установленная ширина квадрата & высота в 2x1.

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

Answer 8

Я был в состоянии сделать это с помощью U (Подчеркивание 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; 
} 


<a href="" style="text-decoration:none"> 
    <div style="text-align: right; color: Red;"> 
     <u> Shop Now</u> 
    </div> 
</a> 

Answer 9

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

HTML:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6> 

css:

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

Answer 10

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

<a href="#"> 
    <span>insert multiline texts here</span> 
</a> 

, то вы можете просто добавить границы дна и отступы на <span>.

a { 
    width: 300px; 
    display: block; 
} 

span { 
    padding-bottom: 10px; 
    border-bottom: 1px solid #0099d3; 
    line-height: 48px; 
} 

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

Answer 11

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

Смотрите здесь более подробно: https://css-tricks.com/almanac/properties/t/text-underline-position/