Wie kann ich Platz zwischen der Grenze (underline Hover-Effekt) haben. und die Farbe der Linie sollte rot sein.Text-Dekoration Raum zwischen Objekt
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>Wenn Sie text-decoration verwenden wird es Standardzeile zu erstellen, aber wenn Sie dann border-bottom maßgeschneiderte wollen anstatt die Farben und Liniengröße und Polsterung zwischen für Abstand in ändern.
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>Verwendung border-bottom und padding statt
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>Da Ihre Schließung </a> Tag in der nächsten Zeile und HTML-Browser ist es, mehrere Räume in einem sp kollabieren Deshalb sehen Sie, dass Sie im Leerraum unterstreichen.
Also die erste (ein wenig mühsam) Option ist, Ihre End-Tags direkt nach dem Text zu schließen.
Außerdem müssen Sie Ihre letzte 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>