Управление подчеркиванием позиции при оформлении текста: подчеркивание

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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/

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

Существует одно свойство 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

Ответ 7

Вместо этого я использовал бы границу. Легче контролировать это.