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

306

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

css underline MAXP
источник
1
Это не совсем то, о чем вы просили, но это была интересная статья на эту тему: CSS Design: Custom Underlines
Peter Rowell
Расстояние определяется используемым шрифтом. Попробуйте веб-безопасные шрифты.
Алексей Данченков
1
В CSS3 появилось много новых свойств для оформления текста. Пожалуйста, проверьте alligator.io/css/text-decoration Пример: text-underline-position: under;и text-decoration-skip: ink;Обратите внимание, что это, вероятно, не обратно совместимо со старыми браузерами.
chocolata
1
Еще одно удачное решение
w3spi
1
Голосуйте за text-underline-offsetздесь: bugs.chromium.org/p/chromium/issues/…
Марк Фишер

Ответы:

356

Нет, но вы могли бы пойти с чем-то вроде 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

chelmertz
источник
3
Моя единственная проблема с этим трюком - когда я использую высоту строки, равную высоте div, а затем выравнивание по вертикали: middle; чтобы он был в центре, тогда я не могу использовать этот трюк, потому что тогда подчеркивание заканчивается ниже div.
deweydb
@deweydb: Как насчет добавления нижнего отступа к div контейнера? jsfiddle.net/dYfjc/1
chelmertz
+1 Я не знал о том, чтобы оставить свойство color для наследования цвета шрифта - это сэкономит много пота и слез в будущем!
Ларри
9
Я не совсем уверен, почему этот ответ имеет так много голосов. Это не полностью работает с многострочными текстами.
3
Для многострочных вы можете заключить многострочные тексты в промежуток внутри элемента. Например, <a href="#"><span>insert multiline texts here</span></a>просто добавьте border-bottom и отступы на <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
Даниэль Эрнандес,
133

Обновление 2019: Рабочая группа CSS опубликовала черновик для оформления текста уровня 4, в котором будет добавлено новое свойство text-underline-offset(а такжеtext-decoration-thickness ), позволяющее контролировать точное размещение подчеркивания. На момент написания статьи это черновой вариант на ранней стадии, который не был реализован ни одним браузером, но похоже, что в конечном итоге приведенная ниже техника устареет.

Оригинальный ответ ниже.

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

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

последний ребенок
источник
2
Это не будет работать для моей конкретной проблемы, но это фантастический трюк. +1
11
Хорошая работа, но это не будет работать для якорей, которые охватывают несколько строк
Willster
@ last-child Этот лучше, чем подчеркивание, но с
переносом
Одна проблема заключается в том, что границы и подчеркивание - это две разные вещи. Например, часть текста должна быть ниже подчеркивания. Если вы стилизуете a-теги как кнопки, у вас нет свободы использовать в качестве подчеркивания border-bottom.
Андерс Линден
10
Представьте себе, что кто-то, кто является новичком в веб-разработке, графический дизайнер, обычный пользователь или ваша мама, говорит, что это то, что требуется для добавления некоторого контролируемого пространства между текстом и подчеркиванием, и они будут удивляться, что вы делаете со своей жизнью. ,
MarcGuay
79

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

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

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

Дюк хюн
источник
2
Спасибо! Если вы пытаетесь сделать пунктирное подчеркивание и видите, что оно нарисовано без пробела между нижней частью текста и линией, то это решает проблему.
Джонатан Кросс
6
Это правильный ответ для современных браузеров без каких-либо обходных путей.
Парас Шах
2
Это не работает в Firefox, даже с префиксом вендора - но это в спецификации W3C: w3.org/TR/css-text-decor-3/#text-underline-position-property . Другой соответствующий ресурс: quackit.com/css/css3/properties/css_text-underline-position.cfm
rosell.dk
4
На данный момент, это действительно работает только в браузере Chrome и не является решением для других браузеров.
мир
2
Ну, на момент написания этого комментария я вижу, что это работает и в Firefox .
Джарад
15

Вот то, что хорошо работает для меня. 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
Развернуть фрагмент

Джордан Старрк
источник
2
Важно отметить, что text-underline-positionне поддерживается в Firefox согласно developer.mozilla.org/en-US/docs/Web/CSS/…
Флоран Гмехлин
Очень интересно. Отличный выноска. Спасибо!
Джордан Старрк
Поддерживается в Firefox начиная с 74, по той же ссылке.
GSerg
11

Вникать в детали визуального стиля 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;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
Развернуть фрагмент

  • Отрегулируйте значения% (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

Я сделал сксс-миксин для этого. Если вы не используете 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того же цвета, что и фон, чтобы спускатели выглядели хорошо.

кредит

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

squarecandy
источник
К сожалению, ссылка eager.io больше не работает. Вы помните, что было взломом, чтобы спускатели выглядели лучше?
Кано
1
@ Kano - я думаю, что он использовал текстовую тень того же цвета, что и сплошной фон.
Squarecandy
Кроме того, с помощью описанной выше техники вы можете установить цвет подчеркивания, отличный от текста, поэтому иногда я устанавливаю его светлее, чем текст, что делает столкновения со спусковыми механизмами меньшей проблемой для удобочитаемости.
Squarecandy
7

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

Доминик П
источник
1
Мне не нужно было устанавливать высоту. Я просто завернул его в другой div и, поскольку хотел, чтобы он был отцентрирован, я просто установил выравнивание текста на out div.
Парень Лоу
6

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

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

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

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

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

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

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;
}
Майкл Грейсман
источник
9
H2s - это блочные элементы, которые могут объяснить, почему подчеркивание длиннее, чем текст. Может быть, display: inline-blockэто исправить. Замена текста contentвыглядит как хак, который может сломаться разными способами.
последний ребенок
3

Смотри мою скрипку .

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

звездная пыль
источник
2

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

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

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

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

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

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

Даниэль Эрнандес
источник
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);

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

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

mcmimik
источник
1

Если вы используете text-decoration: underline;, то вы можете добавить пробел между подчеркиванием и текстом, используяtext-underline-position: under;

Подробнее о свойствах text-underline-position вы можете посмотреть здесь

Ифра
источник
0

Я смог сделать это, используя 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>
Арун Прасад Е.С.
источник
0

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

HTML:

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

CSS:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
Константинос Константину
источник
0

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

<span style="border-bottom: 1px solid black"> Enter text here </span>
Фрэнсис Акоста
источник