文本和下劃線之間的差距

我想知道爲什麼填充底部或邊距底部不能用下劃線？在li> a：在添加填充底部之前，它不會創建任何類型的空間。我沒有想法，你能幫我嗎？文本和下劃線之間的差距

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
\t text-align: right; 
 
\t line-height: 10vh; 
 
\t margin-right: 10vh; 
 
\t animation: fadein 5s; 
 
    -moz-animation: fadein 5s; /* Firefox */ 
 
    -webkit-animation: fadein 5s; /* Safari and Chrome */ 
 
    -o-animation: fadein 5s; /* Opera */ 
 
    font-family: verdana; 
 
} 
 

 
li { 
 
    display: inline; 
 
    margin-left: 2.5vh; 
 
\t margin-right: 5vh; 
 
\t text-transform: uppercase; 
 
} 
 

 
a { 
 
\t text-decoration:none; 
 
\t color: white; 
 
} 
 

 
li > a { 
 
\t position: relative; 
 
    \t color: black; 
 
    \t text-decoration: none; 
 
} 
 

 
li > a:hover { 
 
    color: black; 
 
} 
 

 
li > a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    padding-bottom: 3px; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: black; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.7s ease-in-out 0s; 
 
    transition: all 0.7s ease-in-out 0s; 
 
} 
 

 
li > a:hover:before { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
}

<nav id="nav"> 
 
\t \t <ul> 
 
\t \t <li id="about"><a href="#">About</a></li> 
 
\t \t \t <li id="work"><a href="#">Work</a></li> 
 
\t \t \t <li id="contact"><a href="#">Contact</a></li> 
 
\t \t </ul> 
 
</nav>

來源

2017-06-22 CaL17

的可能的複製【如何提高文本和CSS強調之間的差距（https://stackoverflow.com/questions/1734618/how-to-increase-the -gap-between-text-and-underlining-in-css） – jonrsharpe

變化bottom: 0到bottom: -3px;得到你想要的東西：

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
\t text-align: right; 
 
\t line-height: 10vh; 
 
\t margin-right: 10vh; 
 
\t animation: fadein 5s; 
 
    -moz-animation: fadein 5s; /* Firefox */ 
 
    -webkit-animation: fadein 5s; /* Safari and Chrome */ 
 
    -o-animation: fadein 5s; /* Opera */ 
 
    font-family: verdana; 
 
} 
 

 
li { 
 
    display: inline; 
 
    margin-left: 2.5vh; 
 
\t margin-right: 5vh; 
 
\t text-transform: uppercase; 
 
} 
 

 
a { 
 
\t text-decoration:none; 
 
\t color: white; 
 
} 
 

 
li > a { 
 
\t position: relative; 
 
    \t color: black; 
 
    \t text-decoration: none; 
 
} 
 

 
li > a:hover { 
 
    color: black; 
 
} 
 

 
li > a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    padding-bottom: 3px; 
 
    bottom: -3px; 
 
    left: 0; 
 
    background-color: black; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.7s ease-in-out 0s; 
 
    transition: all 0.7s ease-in-out 0s; 
 
} 
 

 
li > a:hover:before { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
}

<nav id="nav"> 
 
\t \t <ul> 
 
\t \t <li id="about"><a href="#">About</a></li> 
 
\t \t \t <li id="work"><a href="#">Work</a></li> 
 
\t \t \t <li id="contact"><a href="#">Contact</a></li> 
 
\t \t </ul> 
 
</nav>

來源

2017-06-22 22:17:22 Johannes

非常感謝:) – CaL17

或者加上「填充底」到「LI>一個」。工作得很好。 :)

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
\t text-align: right; 
 
\t line-height: 10vh; 
 
\t margin-right: 10vh; 
 
\t animation: fadein 5s; 
 
    -moz-animation: fadein 5s; /* Firefox */ 
 
    -webkit-animation: fadein 5s; /* Safari and Chrome */ 
 
    -o-animation: fadein 5s; /* Opera */ 
 
    font-family: verdana; 
 
} 
 

 
li { 
 
    display: inline; 
 
    margin-left: 2.5vh; 
 
\t margin-right: 5vh; 
 
\t text-transform: uppercase; 
 
} 
 

 
a { 
 
\t text-decoration:none; 
 
\t color: white; 
 
} 
 

 
li > a { 
 
\t position: relative; 
 
    \t color: black; 
 
    \t text-decoration: none; 
 
    padding-bottom: 10px; 
 
} 
 

 
li > a:hover { 
 
    color: black; 
 
} 
 

 
li > a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    padding-bottom: 3px; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: black; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.7s ease-in-out 0s; 
 
    transition: all 0.7s ease-in-out 0s; 
 
} 
 

 
li > a:hover:after { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
}

<nav id="nav"> 
 
\t \t <ul> 
 
\t \t <li id="about"><a href="#">About</a></li> 
 
\t \t \t <li id="work"><a href="#">Work</a></li> 
 
\t \t \t <li id="contact"><a href="#">Contact</a></li> 
 
\t \t </ul> 
 
</nav>

來源

2017-06-22 22:24:43 MaTonka

文本和下劃線之間的差距

回答

相關問題