Как увеличить разрыв между текстом и подчеркиванием в ссылках на панели навигации

Я установил ссылки на панели навигации на подчеркивание, когда они активны, но мне нужен некоторый запас между текстом и подчеркиванием. Как я могу запрограммировать это в css?

.nav .active a{
  text-decoration: underline;

}
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul class="nav navbar-default">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </nav>
           
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
       
    </body>
</html>


html css
person Mo-Alanteh    schedule 05.06.2015    source источник
comment
возможный дубликат Как увеличить разрыв между текстом и подчеркивание в CSS   -  person Uriil    schedule 05.06.2015

Ответы (3)


arrow_upward
2
arrow_downward

Путь Джорджа подойдет. Другой способ выглядит следующим образом:

Тот же HTML, что и у Джорджа, за исключением удаления <span>:

<nav>
    <ul class="nav navbar-default">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
    </ul>
</nav>

CSS:

.nav .active a{
  padding-bottom: 5px;
text-decoration: none;
border-bottom: 1px solid #337ab7;
}

.nav .active a:hover{
  border-bottom: 1px solid #23527c;
}

Вот урезанная скрипка: http://jsfiddle.net/samuidavid/thuLwrkf/

person David Wilkinson    schedule 05.06.2015
comment
Это будет иметь нежелательный эффект при загрузке навигации, поэтому я добавил дополнительный <span>: bootply.com/myntFkyMje < / а> - person George; 08.06.2015

arrow_upward
2
arrow_downward

Вы не можете, во всяком случае, с text-decoration.

Вам нужно будет изменить разметку и добавить элемент, к которому вы можете применить границу:

HTML

<nav>
    <ul class="nav navbar-default">
        <li role="presentation" class="active"><a href="#"><span>Home</span></a></li>
        <li role="presentation"><a href="#"><span>Profile</span></a></li>
        <li role="presentation"><a href="#"><span>Messages</span></a></li>
    </ul>
</nav>

CSS

.nav .active a span{
  padding-bottom: 5px;
  border-bottom: 1px solid #337ab7;
}
.nav .active a:hover span{
  border-bottom-color: #23527c;
}

Bootply

person George    schedule 05.06.2015

arrow_upward
0
arrow_downward

вы можете проделать этот трюк. Используйте border-bottom с padding-bottom

.nav .active a {
  padding-bottom: 5px;
  text-decoration: none;
  border-bottom: 1px solid #000;
}
person iurii    schedule 05.06.2015
comment
Это не сделает того, чего вы ожидаете. - person George; 05.06.2015
comment
Я думаю, что нет чистого способа увеличить разрыв между текстом и оформлением текста - person iurii; 05.06.2015