1

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!

lifeaholic
  • 13
  • 3

1 Answers1

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

Moiz Sheikh
  • 155
  • 8