css - li 标签边框底部太长

Question

我试图模仿我一直看到的这个菜单东西，我试过这个:

HTML:

<ol>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
    <li>item one</li>
</ol>

CSS:

ol {
    list-style-type: none;
}

ol li {
    display: inline;
    padding-right: 4%;
}

ol li:hover {
    border-bottom: 6px solid lightblue;
}

但问题是，因为我在每个列表项之间保持距离，底部边框将使用所有空间，有没有办法让它保持单词的长度并仍然保持空间在两者之间？

Answer 1

只需使用 margin-right 而不是 padding-right