Як збільшити розрив між текстом та підкресленням у CSS

306

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

css  underline 
— макс
джерело
1
Це не саме те, про що ви просили, але це було цікаве прочитання на тему: CSS Design: Custom Underlines
— Пітер Роуелл
Відстань визначається використовуваним шрифтом. Спробуйте веб-безпечні шрифти.
— Олексій Данченков
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/isissue/…
— Марк Фішер

Відповіді:

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

— хелмерц
джерело
3
Моя єдина проблема з цим трюком - коли я використовую висоту лінії, рівну висоті Div, а потім вертикальну вирівнювання: середина; щоб отримати його в центрі, тоді я не можу використовувати цей трюк, оскільки тоді підкреслення закінчується нижче діва.
— deweydb
@deweydb: Як щодо того, як додати нижню частину прокладки до дива контейнера? jsfiddle.net/dYfjc/1
— chelmertz
+1 Я не знав про те, щоб залишити властивість кольору успадкувати колір шрифту - це заощадить багато поту і сліз у майбутньому!
— Ларрі
9
Я майже не впевнений, чому ця відповідь має стільки відгуків. Це не повністю працює з багаторядковими текстами.
3
Для багаторядкових текстів можна загортати текстові текстові рядки в проміжок всередині елемента. Наприклад, <a href="#"><span>insert multiline texts here</span></a>тоді просто додайте межу і нижню межу <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
Хороша робота, але це не допоможе
— якорям,
@ last-child Це краще, ніж підкреслити, але при обгортанні тексту це не працює для кожного рядка
— Нішанта
Одна з проблем полягає в тому, що межу і підкреслення - це дві різні речі. Наприклад, частина тексту повинна бути нижче підкресленої. Якщо ви розміщуєте a-теги як кнопки, у вас немає свободи використовувати межу із нижньої межі як підкреслення.
— Андерс Лінден
10
Уявіть собі, що ви скажете комусь, хто є новим у веб-розробці, графічному дизайнеру, пересічному користувачеві або вашій мамі, що саме для цього потрібно додати деякий контрольований простір між текстом, і це підкреслить, і вони зададуться питанням, що ви робите зі своїм життям .
— MarcGuay
79

Ви можете використовувати це text-underline-position: under

Детальніше дивіться тут: https://css-tricks.com/almanac/properties/t/text-underline-position/

Дивіться також сумісність браузера .

— Duc Huynh
джерело
2
Дякую! Якщо ви намагаєтеся робити пунктирне підкреслення і бачите, що він намальований без пробілу між нижньою частиною тексту та рядком, це вирішує проблему.
— Джонатан Хрест
6
Це правильна відповідь для сучасних браузерів без жодних рішень.
— Paras Shah
2
Він не працює у Firefox, навіть не з префіксом vendor - але він є у специфікації 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
На цей момент це справді працює лише в хромованому браузері і не є рішенням для інших браузерів.
— miir
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/…
— Floran Gmehlin
Дуже цікаво. Чудове виноска. Дякую!
— Джордан
Підтримується у 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

Я зробив для цього 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%);
}

Оновлення 2: Підказка Descenders

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

Кредит

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

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

Я знаю, що це давнє запитання, але для встановлення тексту в одному рядку, display: inline-blockа потім для встановлення heightзнака добре працювало, щоб контролювати відстань між межею та текстом.

— Домінік П
джерело
1
Мені не потрібно було встановлювати висоту. Я просто загорнув його в інший div і, як я хотів, щоб його було по центру, я просто встановив вирівнювання тексту на діві.
— Гай Лоу
6

@ відповідь останньої дитини - чудова відповідь!

Однак додавання рамки до моєї 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;
}
— Майкл Грейсман
джерело
9
H2 - це елементи блоку, які можуть пояснити, чому підкреслення було довше тексту. Можливо, display: inline-blockце виправить. Заміна тексту contentвиглядає як хак, який може зламатися багатьма способами.
— остання дитина
3

Дивіться мою загадку .

Вам потрібно буде використовувати властивість ширини кордону та властивість прокладки. Я додав анімацію, щоб вона виглядала крутіше:

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>

тоді ви можете просто додати межу із нижньої межі та накладки на <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/ - просто встановіть квадратну ширину та висоту в 2х1.

Джерело натхнення: http://alistapart.com/article/customunderlines

— mcmimik
джерело
1

Якщо ви використовуєте text-decoration: underline;, ви можете додати пробіл між підкресленням та текстом, використовуючиtext-underline-position: under;

Докладніше про властивості підкреслення тексту, ви можете подивитися тут

— Іфра
джерело
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>
— Arun Prasad ES
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.