Question

我正在构建一个菜单，当我将鼠标悬停在菜单上时，想要在文本下添加一行。我要添加的行类似于Image Link

这是CSS代码：

nav {
    height: 30px;
    width: 100%;
    background: black;
    font-size: 0.9em;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
}
nav ul {
    padding: 0;
    margin: 0 auto;
}

nav li {
    display: inline;
    float: left;
}

nav a {
    color: #fff;
    display: inline-block;
    margin:5px 5px 5px 30px ;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0px #283744;
}

nav a:hover, nav a:active {

}

Answer 1

nav a:hover, nav a:active {
    text-decoration: underline;
}

如果不起作用，请将nav a更改为nav a:link

Answer 2

您可以使用

nav a:hover {
    text-decoration: underline;
}

如果您希望下划线与文字颜色相同，否则您必须

border-bottom: solid 1px green;

或任何你想要的颜色

Answer 3

添加：text-decoration: underline;

Answer 4

nav a:hover {
    text-decoration: underline;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

在css中悬停时在文本下添加一行

4 个答案: