html - CSS3 中的上划线太长

Question

我不明白为什么它比左边的文字长。其余菜单项相同。

这是我的上划线的样子。

Fiddle

这是列表的 HTML:

<ul class="menu">
    <li><a href ="index.html">Home</a></li>
    <li><a href="#">About stuff</a></li>
</ul>

这是相应的 CSS:

ul.menu {
    list-style-type: none;
    text-align: center;
    text-color: 000000;
    word-spacing: 0.3em;
    letter-spacing: 0.5em;
    line-height: 120%;
    text-decoration: overline;
    text-transform: lowercase;
    text-shadow: 0.04em 0.04em #000000;
}

Answer 1

从 ul.menu 中删除 text-decoration: overline; 并将其放入 li。

查看我的代码片段:

ul.menu {
    list-style-type: none;
    text-align: center;
    text-color: 000000;
    word-spacing: 0.3em;
    letter-spacing: 0.5em;
    line-height: 120%;
    text-transform: lowercase;
    text-shadow: 0.04em 0.04em #000000;
}

li {
    text-decoration: overline;
    display: inline-block;
}

<ul class="menu">
    <li><a href ="index.html">Home</a></li>
    <li><a href="#">About stuff</a></li>
</ul>