Как опустить маркеры списка?

Question

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

<ul class="false-about__list">
                            <li>У &nbsp; вашего &nbsp; &nbsp;ребенка &nbsp; задержка &nbsp; речевого
                                <p>развития и плохая речь;</p>
                            </li>
                            <li>Нет фразовой речи после 2-х лет;
                            </li>
                            <li>Ему скоро 3 года, а он не говорит еще
                                <p>предложениями, в его словарном запасе только</p>
                                <p>“Мама”, “Да”, “Фух” и разные звуки;</p>

                            </li>
                            <li>Вы наблюдаетесь у невролога, пьете
                                <p>таблетки,
                                    но результатов особо нет или они</p>
                                <p>слабые;</p>
                            </li>
                            <li>
                                <p>Вы не знаете как научить ребенка</p>
                                <p>разговаривать
                                    или вы пытаетесь сами</p>
                                <p>разговорить
                                    ребенка: книги, мамские блоги,</p>
                                <p>некоторые методики, но все не то… как</p>
                                <p>замкнутый круг по
                                    которому вы бесконечно</p>
                                <p>ходите.</p>
                            </li>
                        </ul>
.false-about__list {
            li {
                list-style-image: url(../img/second.png);
                padding-top: 10px;
                position: relative;
                bottom: 10px;
                padding-left: 15px;
            }
        }

Answer 1

Разделяйте параграфами отдельные блоки текста, а не каждую строку.

Использование list-style-image не даёт гибкости в настройках маркеров, поэтому правильным решением будет псевдоэлемент:

.false-about__list {
  width: 300px;
}

.false-about__list li {
  position: relative;
  list-style-type: none;
  padding: 10px;
}
.false-about__list li::before {
  content: '×';
  position: absolute;
  top: 10px; left: -16px;
  height: 18px; width: 18px;
  border-radius: 50%;
  color: red;
  box-shadow: inset 0 0 0 2px currentColor;
  font: 18px/18px sans-serif;
  text-align: center;
}

<ul class="false-about__list">
  <li>У вашего ребенка задержка речевого развития и плохая речь;</li>
  <li>Нет фразовой речи после 2-х лет;</li>
  <li>Ему скоро 3 года, а он не говорит еще предложениями, в его словарном запасе только “Мама”, “Да”, “Фух” и разные звуки;</li>
  <li>Вы наблюдаетесь у невролога, пьете таблетки, но результатов особо нет или они слабые;</li>
  <li>Вы не знаете как научить ребенка разговаривать или вы пытаетесь сами разговорить ребенка: книги, мамские блоги, некоторые методики, но все не то… как замкнутый круг по которому вы бесконечно ходите.</li>
</ul>

БЛОГ НА HUSL

Как опустить маркеры списка?

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