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

проблема с использованием 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;
}

обновление: нахальная версия

Я сделал 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%);
}

Update 2: Descenders Tip

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

кредит

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

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

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

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

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

1. изменить content к чему-то нужной длины (т. е. то же самое

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

подчеркнуть <h2>Processing</h2> (например), измените код последнего ребенка на:

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

посмотреть мои скрипка.

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

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>

Альтернативы для многострочных текстов или ссылок, вы можете обернуть текст в span внутри блочного элемента.

<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/

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

• multiline
• пунктирной
• С пользовательской нижней прокладкой
• без фантиков

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

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

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

я смог сделать это с помощью U (подчеркивание тега)

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>

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

html:

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

css:

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