Раскраска упорядоченных и неупорядоченных списков и корректировка высоты

Question

Я использую Wordpress.Я устанавливаю некоторые изменения CSS в дополнительном поле CSS.Поскольку я мало что знаю о CSS, я вставляю код CSS прямо в поле.Как я могу раскрасить списки и увеличить высоту между ними, например, на этом сайте ? Ссылка на сайт Снимок экрана

 li::before {
       top: .6rem; 
       background-color: #272284;
    }

Я добавил этот код в дополнительное поле css, но изменений не было.Это тема, которую я использую.На этой странице вы можете видеть упорядоченные и неупорядоченные списки. Тема

Answer 1

Вы не включили свойство контента.Кроме того, это создает цветные точки, поэтому вам нужно отключить стиль списка и сделать каждый список относительным, чтобы псевдоэлементы могли позиционироваться на их основе:

li {
    list-style: none;
    position: relative;
}


li:before {
    background-color: red;
    content: '';
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
    left: -1rem;
    top: 1rem;
}

Answer 2

Попробуйте:

HTML:

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

CSS:

ul {
   background-color: #ff0000
}

li {
   margin-top: 6rem; 
}

(ol вместо ul для упорядоченных списков)