CSS выравние текста внутри списка

Question

проблема такая:

создаю нумерованный список, в списке оформление цифр специфическое

вот css, html:

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
}

li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}

<ol>
  <li>Domain Controller (DC): сервер, который отвечает за аутентификацию и авторизацию пользователей, а также хранит информацию о домене.jfdkfjkdfjdjkdfkjfdjkgfdkjgfdkj sdkfsdhfkj ksdjfnlksdl skfldklkjslk fdkjd</li>
  <li>Domain: логическая группа компьютеров и пользователей, которая является частью сети.</li>
  <li>Tree: иерархическая структура доменов, которая позволяет создавать сложные структуры доменов.</li>
  <li>Forest: деревьев доменов, который позволяет создавать глобальную инфраструктуру идентичности и доступа.</li>
</ol>

получается вот это:

подскажите как исправить перенос, как сделать отступ, чтобы текст был выровнен по левой границе

Answer 1

Так как теперь счетчик расположен внутри списка его можно вынести за границу контейнера с помощью отрицательного margin

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
}

li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px 10px -50px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}

<ol>
  <li>Domain Controller (DC): сервер, который отвечает за аутентификацию и авторизацию пользователей, а также хранит информацию о домене.jfdkfjkdfjdjkdfkjfdjkgfdkjgfdkj sdkfsdhfkj ksdjfnlksdl skfldklkjslk fdkjd</li>
  <li>Domain: логическая группа компьютеров и пользователей, которая является частью сети.</li>
  <li>Tree: иерархическая структура доменов, которая позволяет создавать сложные структуры доменов.</li>
  <li>Forest: деревьев доменов, который позволяет создавать глобальную инфраструктуру идентичности и доступа.</li>
</ol>

Answer 2

Можно через padding весь текст подвинуть вправо, а первую строку через text-indent на столько же обратно влево.

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
  text-indent: -60px;
  padding-left: 60px;
}

li:before {
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  text-indent: 0;
}

<ol>
  <li>Domain Controller (DC): сервер, который отвечает за аутентификацию и авторизацию пользователей, а также хранит информацию о домене.jfdkfjkdfjdjkdfkjfdjkgfdkjgfdkj sdkfsdhfkj ksdjfnlksdl skfldklkjslk fdkjd</li>
  <li>Domain: логическая группа компьютеров и пользователей, которая является частью сети.</li>
  <li>Tree: иерархическая структура доменов, которая позволяет создавать сложные структуры доменов.</li>
  <li>Forest: деревьев доменов, который позволяет создавать глобальную инфраструктуру идентичности и доступа.</li>
</ol>

Answer 3

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

ol {
  counter-reset: myCounter;
}

li {
  list-style: none;
  position: relative;
  padding-left: 60px;
  margin: 30px 0;
}

li:before {
  position: absolute;
  left: 0;
  top: -18px;
  counter-increment: myCounter;
  content: counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}

<ol>
  <li>Domain Controller (DC): сервер, который отвечает за аутентификацию и авторизацию пользователей, а также хранит информацию о домене.jfdkfjkdfjdjkdfkjfdjkgfdkjgfdkj sdkfsdhfkj ksdjfnlksdl skfldklkjslk fdkjd</li>
  <li>Domain: логическая группа компьютеров и пользователей, которая является частью сети.</li>
  <li>Tree: иерархическая структура доменов, которая позволяет создавать сложные структуры доменов.</li>
  <li>Forest: деревьев доменов, который позволяет создавать глобальную инфраструктуру идентичности и доступа.</li>
</ol>

БЛОГ НА HUSL

CSS выравние текста внутри списка

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