Ширина hover равна количеству символов в строке

Question

Есть список, в нём строки разной длины. li:hover и li:active выделяют строки одинаковой ширины в 200px. Пытаюсь сделать так, чтобы ширина выделения каждой строки было индивидуальным, т. е. чтобы в строке выделялось только с первого по последний символ.

li:hover {
  background: green;
  width: auto;
}

li:active {
  background: red;
  width: auto;
}

.abc {
  width: 200px;
}

<!DOCTYPE html>
<html>
<head>
</head>
  <body>
    <div class="abc">
      <ul>
        <li>123</li>
        <li>456789</li>
        <li>abcdefg987654321</li>
      </ul>
    </div>
  </body>
</html>

width: auto и width: 100% не дают желаемого результата

Answer 1

Просто оберните содерживое в отдельный элемент.

li:hover span {
  background: green;
  width: auto;
}

li:active {
  background: red;
  width: auto;
}

.abc {
  width: 200px;
}

<div class="abc">
  <ul>
    <li><span>123</span></li>
    <li><span>456789</span></li>
    <li><span>abcdefg987654321</span></li>
  </ul>
</div>

Answer 2

Конкретно для данного случая, достаточно указать для width значение max-content или min-content. При этих значениях, блок подстраивается под контент, а не растягивается на ширину родителя. Эффект от этих значений разнится, поэтому лучше рассмотреть на примере:

body { display: flex; justify-content: space-around; justify-content: space-evenly; }

div { width: 200px; box-shadow: 0 0 0 2px blue; }

li { box-shadow: inset 0 0 0 2px #fa0; }
li:hover  { background: green; }
li:active { background: red; }

.auto li { width: auto; }
.min  li { width: min-content; }
.max  li { width: max-content; }

<div class="auto">width: auto - по умолчанию
  <ul>
    <li>123</li>
    <li>456789</li>
    <li>abcdefg987654321</li>
    <li>Слово СловоПодлиннее НуОченьДлинноеСлово</li>
  </ul>
</div>
<div class="max">width: max-content - если не нужны переносы или содержимое малой длины
  <ul>
    <li>123</li>
    <li>456789</li>
    <li>abcdefg987654321</li>
    <li>Слово СловоПодлиннее НуОченьДлинноеСлово</li>
  </ul>
</div>
<div class="min">width: min-content - если переносы допускаются
  <ul>
    <li>123</li>
    <li>456789</li>
    <li>abcdefg987654321</li>
    <li>Слово СловоПодлиннее НуОченьДлинноеСлово</li>
  </ul>
</div>

БЛОГ НА HUSL

Ширина hover равна количеству символов в строке

Ответы (2 шт):