0

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

<ul> 
    <li>
        <a href="">Текст</a>
    </li>
<ul>

Если элементы списка представлены inline-block'ом и подчеркивание распространяется на весь блок?

2
  • Ссылка - текст, представленный элементом списка ul 19 июн 2015 в 20:01
  • Недостаточно кода для ответа.
    – Qwertiy
    19 июн 2015 в 20:01

2 ответа 2

2

Используйте text-decoration: underline;
На него не влияет свойство display;

HTML:

<ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

CSS:

ul li {
    display: inline-block;
}

ul li:hover {
    text-decoration: underline;
}

Пример в fiddle

0

Также возможно:

Пример 1 - использовать border

ul{
    padding-left: 0;
    text-align: center;
}
ul > li{
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
}
ul > li a{    
    text-decoration: none;
    font-size: 15px;
    font-family: 'segoe ui';
    color: #000;
    border-bottom: 2px solid transparent;
}
ul > li a:hover{
    border-bottom: 2px solid #f00; /* вместо этого цвета можно использовать любой другой */
}
<ul> 
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
<ul>

Пример 2 - использовать псевдоэлементы - :before or :after

ul{
    padding-left: 0;
    text-align: center;
}
ul > li{
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
}
ul > li a{    
    text-decoration: none;
    font-size: 15px;
    font-family: 'segoe ui';
    color: #000;
    position: relative;    
}
ul > li a:hover:after{
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 100%;
    height: 2px;
    background: #f00;   
}
<ul> 
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
<ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.