Как в CSS оформить данный список?

Question

Надо создать список и оформить все в стилях как на изображении, помогите), вроде в HTML пишу верно, но размеры не получается проставить

Answer 1

nav {
  background: pink;
  padding: 15px;
}

ol {
  padding: 0;
  list-style: none;
  counter-reset: item;
}

li::before {
  content: counter(item) ".";
  color: #fff;
}

li {
  color: #fff;
  margin-bottom: 10px;
  background: lightcoral;
  padding: 10px 0 10px 15px;
  counter-increment: item;
}

span {
  margin-left: 15px;
  padding: 10px;
  background: maroon;
}

<nav>
  <ol>
    <li><span>Apple</span></li>
    <li><span>Orange</span></li>
    <li><span>Pineapple</span></li>
    <li><span>Potato</span></li>
  </ol>
</nav>

БЛОГ НА HUSL

Как в CSS оформить данный список?

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