悬停项目，在其下方放置一个与项目文本宽度相等的框

Question

对于导航，我需要以下内容:

• 如果您悬停一个项目，然后在它下面，应该出现一个框。(已经
• 该框的宽度应与项目文本相同，例如"一"。(不工作然而。)

* {
cursor: default;
}
li:hover::after {
content: '';
display: table;
height: 10px;
width: 100%;
/* width: fit-content; ––– Does not work */
background-color: red;
position: absolute;
}

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

我想尝试width: fit-content;，但它不起作用。

这怎么可能呢?很高兴能得到帮助<3

Answer 1

fit-content应添加到li

* {
cursor: default;
}
li {
width: fit-content;
position: relative;/*dont forget this */
}
li:hover::after {
content: '';
display:block;
height: 10px;
width: 100%;
background-color: red;
position: absolute;
}

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Answer 2

::after是一个伪元素，因此它需要在创建它的元素上设置宽度，以便使用百分比(在本例中为width: 100%;)。同时，删除position: absolute;.

* {
cursor: default;
}
li{
width: 100px;
}
li:hover::after {
content: '';
display: block;
height: 10px;
width: 100%;
background-color: red;
}

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>