Как прижать маркер у li к тексту, если текст прижат к правому краю блока

Question

Маркеры стилизовала через абсолютное позиционирование псевдоэлемента before, каждому выставляя свои расстояния, поскольку при других раскладах маркеры не встают вплотную к началу текста, либо выстраиваются в одну линию в начале ul. Получилось неадаптивно, при изменении разрешения вся эта "красота" плывет. Подкиньте, пожалуйста, идеи, какими еще способами можно таким образом, как на скрине, сделать маркеры у li, при условии, что текст прижат к правому краю блока.

Answer 1

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

ul {
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  position: relative;
  padding-left: 1em;
  font: 16px/2em sans-serif;
  text-align: right;
  color: #0c3338;
}
li::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 0.5em;
  width: 0.5em;
  transform: translate(-200%, -50%);
  border-radius: 50%;
  background-color: #04b7df;
}

<ul>
  <li>uyuyuyuyiuyi</li>
  <li>jkjlk</li>
  <li>lhlhlhlkhlhlkhlkhlhl</li>
  <li>kll</li>
  <li>jkjlkjlkj</li>
</ul>

БЛОГ НА HUSL

Как прижать маркер у li к тексту, если текст прижат к правому краю блока

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