對于導航，我需要以下內容：
- 如果您將滑鼠懸停在一個專案下，則應在其下方出現一個框。（已經在我的例子中作業了。）
- 該框應具有與專案文本相同的寬度，例如“一”。（還沒有作業。）
* {
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
uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
::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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326588.html
標籤：css
上一篇：flexwrap時的邊距