For a navigation, I need the following:

• If you hover an item, then under it, a box should appear. (Already works in my example.)
• The box should have the same width like the item text, for example "One". (Does not work yet.)

* {
  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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I wanted to try it with width: fit-content;, but it does not work.

How is it possible to do that? Would be very happy for help <3

CodePudding user response：

fit-content should be added to 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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

::after is a pseudo-element, so it needs to have a set width on the element creating it in order to work with percentages (in this case width: 100%;). Also, remove the 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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>