Как сделать text-decoration: подчеркнуть с 2px padding?

Мне нравится, чтобы повинующийся разработчик frotend должен был создать подчеркивание с добавлением 2px вместо 1px по умолчанию. Для этого существует простое решение?

PS Да, ребята, я знаю о div с черным цветом backgrond и 1px * Npx и position: relative, но It so медленно...

Ответ 1

Вы можете обернуть текст в span и дать ему border-bottom с padding-bottom:2px;.

Таким образом

span{
    display:inline-block;
    border-bottom:1px solid black;
    padding-bottom:2px;
}

Пример: http://jsfiddle.net/uSMGU/

Ответ 2

Отличный способ сделать это без добавления и дополнительных пролетов и с большим контролем использовать селектор :after.

Полезно особенно для навигационных меню:

.active a:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

Если вам нужно больше или меньше места между текстом и подчеркиванием, добавьте margin-top.

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

.active a:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

Ответ 3

как насчет использования border-bottom:1px; padding:what-you-likepx

Ответ 4

Это - мое решение...

HTML

<p>hola dasf  hola dasdsaddasds dsadasdd<span></span></p>

CSS

p {
  color: red;
  text-decoration: none;
  position: absolute;
}
a:hover {
    color: blue;
}
p span {
    display:block;
    border-bottom:3px solid black;
    width: 50%;
    padding-bottom: 4px;
}

Ответ 5

Я использовал решение @jake, но это дало мне проблемы с горизонтальным выравниванием.

Мои навигационные ссылки являются гибкими, выравниваются по центру и его решение заставляет элемент перемещаться вверх, чтобы оставаться горизонтально по центру.

Я исправил это, выполнив следующее:

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  display: block;
}

Это будет поддерживать горизонтальное выравнивание для вас.