Как у меня есть пространство между границами (underline эффект зависания). и цвет линии должен быть красным.текстовое пространство между объектами
a {
text-decoration: none
}
li {
display: inline;
}
li:hover {
text-decoration: underline;
}<li><a href="">
abc
</a></li>
<li><a href="">
def
</a></li>
<li><a href="">
ggg
</a></li>
<li><a href="">
hello
</a></li>Если вы используете text-decoration она будет создавать линии по умолчанию, но если вы хотите настроенный затем использовать border-bottom вместо того, чтобы изменить цвет и размер строки и отступы для интервал между ними.
a {
text-decoration: none
}
li {
display: inline;
}
li:hover {
border-bottom:1px solid red;
padding-bottom:5px;
}<li><a href="">
abc
</a></li>
<li><a href="">
def
</a></li>
<li><a href="">
ggg
</a></li>
<li><a href="">
hello
</a></li>использование border-bottom и padding вместо
a {
text-decoration: none
}
li {
display: inline-block;
}
li:hover {
border-bottom: 1px solid red;
padding-bottom: 10px;
}<li><a href="">
abc
</a>
</li>
<li><a href="">
def
</a>
</li>
<li><a href="">
ggg
</a>
</li>
<li><a href="">
hello
</a>
</li>Так как ваш закрытия </a> тег на следующей строке и HTML браузеров свернуть несколько пробелов в один зр туз, поэтому вы видите, что подчеркиваете в белом пространстве.
Итак, первая (немного утомительная) опция заключается в том, чтобы закрыть теги конца сразу после текста.
Кроме того, вы должны изменить свой последний CSS для li:hover a
a {
text-decoration: none
}
li {
display: inline;
}
li:hover a {
text-decoration: underline;
}<li><a href="">
abc</a>
</li>
<li><a href="">
def</a>
</li>
<li><a href="">
ggg</a>
</li>
<li><a href="">
hello</a>
</li>a {
text-decoration:none;
display:block;
position:relative;
padding-bottom:20px;
}
li{
display:inline-block;
}
li:hover a:after {
content:"";
position:absolute;
height:1px;
width:100%;
left:0;
bottom:0;
background:red;
}<li><a href="">
abc
</a>
</li>
<li><a href="">
def
</a>
</li>
<li><a href="">
ggg
</a>
</li>
<li><a href="">
hello
</a>
</li>