Niestandardowy symbol punktora dla elementów <li> w <ul>, który jest zwykłym znakiem, a nie obrazem

Zdaję sobie sprawę, że można określić niestandardową grafikę jako znak zastępczy punktora, używając atrybutu CSS:

list-style-image

A następnie nadanie mu adresu URL.

Jednak w moim przypadku chcę po prostu użyć symbolu „+”. Nie chcę do tego tworzyć grafiki, a następnie wskazywać na nią. Wolałbym po prostu poinstruować listę nieuporządkowaną, aby używała symbolu plusa jako symbolu punktora.

Czy można to zrobić, czy jestem zmuszony najpierw zrobić z tego grafikę?

Poniższy cytat pochodzi z Taming Lists :

Może się zdarzyć, że masz listę, ale nie chcesz żadnych punktorów lub chcesz użyć innego znaku zamiast punktora. Ponownie CSS zapewnia proste rozwiązanie. Po prostu dodaj styl listy: brak; do swojej reguły i wymuś wyświetlanie listy LI z wiszącymi wcięciami. Reguła będzie wyglądać mniej więcej tak:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Albo dopełnienie, albo margines musi być ustawiony na zero, a drugi na 1em. W zależności od wybranego „punktora” może być konieczne zmodyfikowanie tej wartości. Ujemne wcięcie tekstu powoduje przesunięcie pierwszego wiersza w lewo o tę wartość, tworząc wysunięcie.

Kod HTML będzie zawierał nasze standardowe UL, ale z dowolnym znakiem lub jednostką HTML, której chcesz użyć zamiast punktora poprzedzającego treść elementu listy. W naszym przypadku użyjemy », podwójnego cudzysłowu prawego:».

»Punkt 1
» Punkt 2
»Punkt 3
» Punkt 4
»Punkt 5 wydłużymy
   trochę, żeby
   się owinął

To jest późna odpowiedź, ale właśnie natknąłem się na to ... Aby uzyskać poprawne wcięcie w każdym zawijanym wierszu, wypróbuj to w ten sposób:

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

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

Tyle rozwiązań.
Ale nadal uważam, że jest miejsce na poprawę.

Zalety:

• bardzo kompaktowy kod
• działa z dowolnym rozmiarem czcionki
  (bez wartości bezwzględnych pikseli)
• idealnie wyrównuje rzędy
  (bez lekkiego przesunięcia między pierwszą linią a kolejnymi liniami)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}

<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

To jest rozwiązanie W3C. Działa w przeglądarkach Firefox i Chrome.

ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }

  <ul><li>item</li></ul>

Oto najlepsze rozwiązanie, jakie do tej pory znalazłem. Działa świetnie i jest cross-browser (IE 8+).

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

Ważne jest, aby znak znajdował się w pływającym bloku o stałej szerokości, aby tekst pozostał wyrównany, jeśli jest zbyt długi, aby zmieścić się w jednym wierszu. 1.2em to szerokość, jaką chcesz dla swojej postaci, zmień ją do swoich potrzeb.

Możesz użyć :beforepseudo-selektora, aby wstawić zawartość przed elementem listy. Możesz znaleźć przykład w Quirksmode, pod adresem http://www.quirksmode.org/css/beforeafter.html . Używam tego do wstawiania gigantycznych cytatów wokół blokowych cytatów ...

HTH.

W moim rozwiązaniu zastosowano pozycjonowanie, aby zawinięte linie automatycznie układały się prawidłowo. Nie musisz się więc martwić ustawieniem dopełnienia - przed samym li:.

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

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Wskazane jest, aby zakwalifikować stylizację, <li>aby nie wpływała na <ol>pozycje listy. Więc:

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

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

Font-awesome zapewnia świetne rozwiązanie po wyjęciu z pudełka:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

Styl kreski em:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

Wolę używać ujemnego marginesu, daje większą kontrolę

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

Co ciekawe, nie wydaje mi się, aby którekolwiek z zamieszczonych rozwiązań było wystarczająco dobre, ponieważ polegają one na tym, że zastosowana postać ma szerokość 1em, co nie musi tak być (może z wyjątkiem odpowiedzi Johna Magnolii, która używa jednak pływaków, komplikować sprawy w inny sposób). Oto moja próba:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Ma to następujące zalety (w porównaniu z innymi rozwiązaniami):

1. Nie zależy od szerokości symbolu, jak widać w przykładzie. Użyłem dwóch znaków, aby pokazać, że działa nawet z szerokimi pociskami. Jeśli spróbujesz tego w innych rozwiązaniach, tekst jest nieprawidłowo wyrównany (w rzeczywistości jest nawet widoczny z symbolem * w wyższych powiększeniach).
2. Daje całkowitą kontrolę nad przestrzenią używaną przez pociski . Możesz zamienić 30px na cokolwiek (nawet 1em itp.). Tylko nie zapomnij zmienić go we wszystkich trzech miejscach.
3. Jeśli daje pełną kontrolę nad pozycjonowaniem pocisku . Po prostu zamień na text-align: center;coś, co ci się podoba. Na przykład możesz spróbować color: red; text-align: right; padding-right: 5px; box-sizing: border-box; lub jeśli nie lubisz bawić się border-box, po prostu odejmij dopełnienie (5px) od szerokości (czyli szerokość: 25px w tym przykładzie). Istnieje wiele opcji.
4. Nie używa pływaków, więc można go umieścić w dowolnym miejscu.

Cieszyć się.

Spróbuj tego

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>