text-decoration space between object - html

Question

How can I have space between the border (underline hover effect). and the color of the line should be red.
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>

Answer 1

use border-bottom and padding instead
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>

Answer 2

If you use text-decoration it will create default line but if you want customised then use border-bottom instead to change the colors and line size and padding for spacing in between.
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>

Answer 3

Since your closing </a> tag is on the next line and HTML browsers collapse multiple spaces into one space that is why you are seeing that underline in the white space.
So the first (a bit tedious) option is to close your end tags just after the text.
Also, you need to change your last CSS to 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>

Answer 4

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>