Контроль подчеркивания на текстовом оформлении: подчеркивание

Question

Есть ли способ управления положением подчеркивания в оформлении текста: подчеркивание?

<a href="#">Example link</a>

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

Answer 1

Единственный способ сделать это - использовать границу вместо подчеркивания. Подчеркивание, как известно, негибко.

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Вот демонстрация. Если места недостаточно, вы можете легко добавить больше - если его слишком много, это немного менее удобно.

Answer 2

Вы можете использовать псевдо до и после, как это. Он хорошо работает и полностью настраивается.

CSS

p {
  line-height: 1.6; 
}
.underline {
   text-decoration: none; 
   position: relative; 
 }   

.underline:after {
    position: absolute;
    height: 1px;
    margin: 0 auto;
    content: '';
    left: 0;
    right: 0;
    width: 90%;
    color: #000;
    background-color: red;
    left: 0;
    bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}

HTML

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>

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

http://codepen.io/bootstrapped/details/yJqbPa/

Answer 3

В CSS 3 есть предложенное свойство text-underline-position, но кажется, что оно еще не реализовано ни в одном браузере.

Так что вам придется использовать обходной путь подавления подчеркивания и добавлениянижняя граница, как это предлагается в других ответах.

Обратите внимание, что подчеркивание не увеличивает общую высоту элемента, а нижняя граница добавляет.В некоторых ситуациях вы можете использовать outline-bottom - что не увеличивает общую высоту - вместо этого (хотя это не так широко поддерживается, как border-bottom).

Answer 4

Есть одно свойство text-underline-position: under.Но поддерживается только в Chrome и IE 10 +.

Дополнительная информация: https://css -tricks.com / almanac / properties / t / text-underline-position / https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

Answer 5

Использование border-bottom-width и border-bottom-style сделает рамку текста того же цвета по умолчанию:

text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;

Answer 6

Используйте нижнюю границу вместо подчеркивания

a{    
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

Измените padding-bottom, чтобы настроить пространство

Answer 7

Я бы вместо этого использовал границы. Проще это контролировать.