Как сделать так, чтобы только первая строка списка была красной?

Question

Сейчас нахождение в <li></li> создаёт отступ для всего содержимого. Как сделать так, чтобы отступ был только для первой строки, как в книгах?

Answer 1

Если список будет не вложенный, можно обойтись через counters.
Для красной первой строки можно воспользоваться ::first-line, прошу заметить, для него не сработает padding и margin.

ol { width: 300px; padding: 0; list-style: none; counter-reset: counter; }

li
{
  counter-increment: counter;
}

li::before
{
  color: initial; /* убрать это, если нужно красить цифру тоже в красный */
  content: counter(counter) ")";
  margin-right: 10px;
}

/* Делаем первую строку красной */
li::first-line
{
  color: #DC4242;
}

<h1>10 книжных фактов</h1>
<ol>
  <li>Все, что я пытаюсь сделать, это выжить и извлечь пользу из грязного, отвратительного, невероятного образа жизни, который они мне дали</li>
  <li>Каждый раз, когда вы поднимаетесь, что-то случается, что заставляет вас вернуться обратно</li>
  <li>Моя мама всегда говорила мне: «Если ты не можешь найти, ради чего жить, тебе лучше найти то, ради чего можно умереть</li>
  <li>Факт</li>
  <li>Факт</li>
  <li>Факт</li>
</ol>

Answer 2

Для решения достаточно установить свойство list-style-position в значение inside.

ol {
  list-style-position: inside;
}

<h1>10 книжных фактов</h1>
<ol>
  <li>Все, что я пытаюсь сделать, это выжить и извлечь пользу из грязного, отвратительного, невероятного образа жизни, который они мне дали</li>
  <li>Каждый раз, когда вы поднимаетесь, что-то случается, что заставляет вас вернуться обратно</li>
  <li>Моя мама всегда говорила мне: «Если ты не можешь найти, ради чего жить, тебе лучше найти то, ради чего можно умереть</li>
  <li>Факт</li>
  <li>Факт</li>
  <li>Факт</li>
</ol>

БЛОГ НА HUSL

Как сделать так, чтобы только первая строка списка была красной?

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