Список элементов пространства между числом и текстом CSS

Question

Я буду использовать неупорядоченные элементы списка.Здесь я разделяю или даю некоторое пространство между маркером и текстомОн работает нормально, но когда текст использует другую строку из-за большого предложения в конкретном элементе списка, он не использует пробел.

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 56px;
}

li::before {
  content: "•";
  padding-right: 38px;
  color: blue;
}

<ul>
  <li>Password must have Alphabet, Numeral and Special Characters.Password must have Alphabet, Numeral and Special Characters</li>
  <li>Password must have Alphabet, Numeral and Special Characters</li>
</ul>

Пожалуйста, дайте мне знать, если вы не можете понять.Заранее спасибо.

Answer 1

Отредактируйте тег li и li::before со следующим кодом:

li { 
    padding-left: 56px; 
    display: table;
}

li::before {
    content: "•"; 
    padding-right: 38px;
    color: blue; 
    display: table-cell;
}

Answer 2

Попробуйте этот код.

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 20px;
  position: relative;
}

li::before {
  content: "•";
  color: blue;
  position: absolute;
  left: 0;
  top: 0;
}

Answer 3

положить display: table в вашем li и li :: перед добавлением display: table-cell может работать для вас

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li { 
    padding-left: 56px; 
    display: table;
}

li::before {
    content: "•"; 
    padding-right: 38px;
    color: blue; 
    display: table-cell;
}

<ul>
  <li>Password must have Alphabet, Numeral and Special Characters.Password must have Alphabet, Numeral and Special Characters</li>
  <li>Password must have Alphabet, Numeral and Special Characters</li>
</ul>

Answer 4

Почему бы вам просто не использовать list-style-type ?

ul.bullet {
    
    list-style-type: disc;
    
    /*
     * you can change to the style that you want
     * list-style-type: circle;
     */
}

<ul class="bullet">
  <li>Password must have Alphabet, Numeral and Special Characters.Password must have Alphabet, Numeral and Special Characters</li>
  <li>Password must have Alphabet, Numeral and Special Characters</li>
</ul>