Как увеличить разрыв между текстом и подчеркиванием в CSS
использование CSS, когда текст имеет text-decoration:underline
применить, можно ли увеличить расстояние между текстом и подчеркиванием?
11 ответов
нет, но вы можете пойти с чем-то вроде 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>
- демо
проблема с использованием 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
свойство (отрицательные числа в порядке) вы можете расположить подчеркивание именно там, где вы хотите.
одна проблема с этой техникой опасаться, что он ведет себя немного странно с переносом строк.
вы можете использовать этот text-underline-position: under
см. здесь для Больше детали:https://css-tricks.com/almanac/properties/t/text-underline-position/
см. также совместимость с браузерами.
вдаваясь в детали визуального стиля 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;
}
обновление: нахальная версия
Я сделал 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%);
}
Update 2: Descenders Tip
если у вас есть твердое цвет фона, попробуйте добавить тонкий text-stroke
или text-shadow
в том же цвете, что и ваш фон, чтобы сделать спуски выглядят красиво.
кредит
это упрощенная версия метода, который я первоначально нашел в https://eager.io/app/smartunderline, но статья имеет с тех пор был снят.
Я знаю, это старый вопрос, но для одной строки текста display: inline-block
и затем установка height
хорошо сработало для меня, чтобы контролировать расстояние между границей и текстом.
@last-ответ ребенка-отличный ответ!
однако добавление границы к моему H2 привело к подчеркиванию длиннее текста.
если вы динамически пишете свой CSS, или если, как мне, вам повезло и вы знаете, какой текст будет, вы можете сделать следующее:
изменить
content
к чему-то правильной длины (т. е. то же самоеtext) установите цвет шрифта в
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;
}
посмотреть мои скрипка.
вам нужно будет использовать свойство ширины границы и свойство заполнения. Я добавил анимацию, чтобы она выглядела круче:
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>
Альтернативы для многострочных текстов или ссылок, вы можете обернуть текст в span внутри блочного элемента.
<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/
если вы хотите:
- многострочный
- пунктирной
- С пользовательской нижней прокладкой
- без фантиков
подчеркивание, вы можете использовать 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
я смог сделать это, используя 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>
это то, что я использую:
HTML-код:
<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>
css:
.horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }