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

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

ОТВЕТЫ

Ответ 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> - Демо

Ответ 2

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

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

Ответ 4

Разбираясь в деталях визуального стиля 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>

Ответ 5

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

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

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

  • измените content на правильную длину (то же самое,

  • ) установите цвет шрифта на 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;
}

Ответ 6

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

Ответ 7

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

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

Ответ 8

Смотрите мой fiddle.

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

Ответ 9

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

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

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

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

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

Ответ 10

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

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

Ответ 11

Я смог сделать это с помощью U (Underline 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>

Ответ 12

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

HTML:

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

CSS

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

Ответ 13

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

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

Ответ 14

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

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