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

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

240 голосов
/ 14 ноября 2009

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

Ответы [ 14 ]

296 голосов
/ 14 ноября 2009

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

103 голосов
/ 05 сентября 2012

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

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

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

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

62 голосов
/ 19 апреля 2017

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

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

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

11 голосов
/ 21 августа 2015

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

Я сделал для этого миксин 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%);
}

Обновление 2: Совет по спусковым механизмам

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

Credit

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

6 голосов
/ 13 декабря 2018

Вот что у меня хорошо работает. 

<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>
6 голосов
/ 24 июня 2013

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

6 голосов
/ 17 апреля 2013

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

Тем не менее, добавление границы к моему 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;
}
3 голосов
/ 19 декабря 2015

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

Вам нужно будет использовать свойство 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 голосов
/ 09 ноября 2016

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

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

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

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

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

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

1 голос
/ 03 июня 2016

Если хотите:

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...