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

Question

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

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

499

css underline

Источник

user35026 14 ноя '09 в 15:48

20 ответов

Решение

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

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

367

Источник

user313910 05 сен '12 в 13:03

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

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

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

129

Источник

user2833788 19 апр '17 в 07:52

Just use

{
   text-decoration-line: underline;
   text-underline-offset: 2px;
}

59

Источник

user13829000 27 авг '20 в 03:23

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

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

33

Источник

user2913203 13 дек '18 в 06:56

на это есть очень простой ответ

      text-decoration: underline;
text-underline-offset: 3px;

text-underline-offset — это собственный метод css. здесь больше о text-underline-offset

12

Источник

user11928441 28 май '22 в 10:26

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

12

Источник

user947370 21 авг '15 в 16:48

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

7

Источник

user931860 24 июн '13 в 17:19

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

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

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

изменить content к чему-то правильной длины (то есть
текст) установить цвет шрифта 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;
}

6

Источник

user1470133 16 апр '13 в 21:08

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

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

3

Источник

user5116614 19 дек '15 в 16:46

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

<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

Источник

user4219699 09 ноя '16 в 10:41

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

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

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

2

Источник

user3386279 03 июн '16 в 19:49

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

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

2

Источник

user7489011 25 мар '19 в 06:40

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

HTML:

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

CSS:

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

1

Источник

user5442645 08 окт '16 в 22:48

Здесь есть несколько отличных решений, но у каждого есть свои проблемы. Смещение подчеркивания текста отличается для каждого браузера. Ответ Squarecandy также работает, но немного сложнее. Использование нижнего края изменяет макет текста и сдвигает его.

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

          a {
        /* Change the source image to account for changes to the text colour. It should be a single column. */
        background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
        /*background-image: url('underlineImage.png');*/
        background-size: 1px 1.1em;
        background-repeat: repeat-x;
        display: inline;
        cursor: pointer;
        text-decoration: none;
    }

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

Приведенный выше пример не включает полную информацию о base64 для создания эффекта. Это отлично работает во всех браузерах, поскольку это фундаментальная вещь и довольно совместима со старыми браузерами.

      <a href="#">This _____ is the link</a>

Если фоновое изображение - png с прозрачностью, оно отлично работает поверх других элементов.

0

Источник

user5905688 25 сен '21 в 09:55

Я смог сделать это, используя 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

Источник

user5237614 17 июн '16 в 10:24

<span class="underline"> Convittech </span> <style> .underline{text-underline-offset: 1.4em} </style>

0

Источник

16 мар '21 в 23:55

Вы можете сделать это, используя:

      text-underline-position: under;

text-underline-offset: {value(px)};

Это свойство сдвинет подчеркивание под вашей ссылкой на указанное вами значение смещения .

Для получения дополнительных ссылок посетите:text-underline-offest | developer.mozilla.org

0

Источник

user16797104 19 июн '22 в 13:26

использовать text-underline-offsetон работал отлично, вот ссылка на документацию https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

0

Источник

user9242103 28 июл '21 в 14:36

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

<span style="border-bottom: 1px solid black"> Enter text here </span>

0

Источник

user3959160 06 ноя '18 в 13:48

Другие вопросы по тегам css underline

user49879 14 ноя '09 в 15:50 2009-11-14 15:50 · Accepted Answer · 2009-11-14 15:50

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