Как увеличить разрыв между текстом и подчеркиванием в CSS
Вопрос
Использование CSS, когда текст имеет text-decoration:underline
применил, можно ли увеличить расстояние между текстом и подчеркиванием?
Решение
Нет, но вы могли бы пойти с чем-то вроде 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>
- Демо
Другие советы
Обновление 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
(отрицательные числа подходят) вы можете расположить подчеркивание именно там, где хотите.
Одна из проблем, связанных с этой техникой, которую следует остерегаться, заключается в том, что она ведет себя немного странно при переносе строк.
Вы можете использовать это 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;
}
<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;
}
Обновлять:НАХАЛЬНАЯ версия
Для этого я сделал 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, но с тех пор статья была удалена.
Вот что хорошо работает для меня.
<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>
Я знаю, что это старый вопрос, но для настройки однострочного текста display: inline-block
а затем установив height
мне помогло контролировать расстояние между границей и текстом.
Ответ @last-child — отличный ответ!
Однако добавление рамки к моему 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;
}
Смотри мой скрипка.
Вам нужно будет использовать свойство ширины границы и свойство заполнения.Я добавил немного анимации, чтобы она выглядела круче:
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>
В качестве альтернативы многострочному тексту или ссылкам вы можете поместить текст в интервал внутри блочного элемента.
<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);
Конечно, вы также можете создать свой собственный шаблон PNG в формате Base64 с другим цветом, высотой и дизайном, например.здесь: http://www.patternify.com/ - просто установите ширину и высоту квадрата 2x1.
Источник вдохновения: http://alistapart.com/article/customunderlines
Если вы используете text-decoration: underline;
, то вы можете добавить пробел между подчеркиванием и текстом, используя text-underline-position: under;
Дополнительные сведения о свойствах text-underline-position вы можете посмотреть здесь
Я смог сделать это, используя 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; }
Что я использую:
<span style="border-bottom: 1px solid black"> Enter text here </span>