'How can I make an <li> not take the entire width? [duplicate]

I am trying to style a <ul>'s items. What I am basically trying to do is when i hover the mouse over one <li> a subtle border should appear. But the problem is that the border is taking the entire list's width.

Code is:

li:hover {
            border-style: dotted;
            border-width: 0.1rem;
}

I have tried to apply display: inline-block or other things that came to me, but didn't manage to make it work.

Current behaviour in this image: currentBehaviour

What is the solution and what is the cause of the current behaviour? Thank you!

css


Solution 1:[1]

It's because your li is taking the full width of ul tag.

You can use

width: fit-content;

Which will make the li take the length of only the text inside rather than complete ul

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Moiz Sheikh

Related Questions