Znak Unicode jako punktor dla elementu listy w CSS

114

Na przykład muszę użyć symbolu gwiazdki (★) jako punktora dla pozycji listy.

Przeczytałem moduł CSS3: Listy , który opisuje, jak używać niestandardowego tekstu jako punktorów, ale nie działa dla mnie. Myślę, że przeglądarki po prostu nie obsługują ::markerpseudoelementu.

Jak mogę to zrobić bez używania obrazów?

AntonAL
źródło
czy możesz umieścić kod, którego używasz? W jakiej przeglądarce to testujesz?
Jonny Haynes
1
stackoverflow.com/questions/3068199/… ma kilka punktorów Unicode. Ani symbol gwiazdy, który masz powyżej, ani 26AB (średnie czarne kółko) nie są wyświetlane na moim komputerze z systemem Windows, chociaż są w porządku w systemie Ubuntu.
Pete Kirkham
Ta odpowiedź (na podobne pytanie) rozwiązała to dla mnie: stackoverflow.com/a/12216973/907575
Piotr Migdal

Odpowiedzi:

77

EDYTOWAĆ

Prawdopodobnie nie polecałbym już używania obrazów. Trzymałbym się podejścia polegającego na używaniu znaku Unicode, na przykład:

li:before {
  content: "\2605";
}

STARA ODPOWIEDŹ

Prawdopodobnie wybrałbym tło obrazu, są znacznie bardziej wydajne, wszechstronne i przyjazne dla różnych przeglądarek.

Oto przykład:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>
agbb
źródło
47
Jak to jest „dużo bardziej wydajne”? Wysyłasz dodatkowe żądanie HTTP w celu pobrania obrazu, a całkowita liczba plików wzrasta, gdy ładujesz obraz do czegoś, co można zrobić tylko za pomocą pojedynczego znaku Unicode.
Mathias Bynens,
2
masz rację, prawdopodobnie „wydajne” nie jest słowem, którego powinienem był użyć, jeśli szukasz wydajności, ale użycie tła obrazu jest z pewnością znacznie bardziej wszechstronne niż użycie tekstu.
agbb
3
Zmiana rozmiaru obrazu nie jest zbyt dobra, ale postać jest idealna w każdym rozmiarze, więc powiedziałbym, że postać jest bardziej wszechstronna: według PI myślę, że zgodność ze słowami
wstecznymi
To nie działa dobrze, gdy <li>tekst się zawija: punktor nie pozostaje bez wcięcia i wygląda jak początek akapitu tekstu. Ta odpowiedź rozwiązuje ten problem: stackoverflow.com/a/14301918/1450294
Michael Scheper
105

Używanie tekstu jako punktorów

Użyj li:beforez encją HTML HTML ze zmianą znaczenia (lub dowolnym zwykłym tekstem).


Przykład

Mój przykład utworzy listy ze znacznikami wyboru jako punktorami.

CSS :

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

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

Zgodność z przeglądarkami

Sam nie testowałem, ale powinno być obsługiwane od IE8. Tak przynajmniej mówią quirksmode i css-tricks .

Możesz użyć komentarzy warunkowych, aby zastosować starsze / wolniejsze rozwiązania, takie jak obrazy lub skrypty. Jeszcze lepiej, użyj obu z <noscript>dla obrazów.

HTML :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

O obrazach tła

Obrazy tła są rzeczywiście łatwe w obsłudze, ale ...

  1. Przeglądarki obsługują background-sizewłaściwie tylko w IE9.
  2. Kolory tekstu HTML i specjalne ( szalone ) czcionki mogą wiele zdziałać przy mniejszej liczbie żądań HTTP.
  3. Rozwiązanie skryptowe może po prostu wstrzyknąć jednostkę HTML i pozwolić temu samemu CSS wykonać pracę.
  4. Dobry reset kodu CSS może ułatwić list-style(bardziej logiczny wybór).

Cieszyć się.

222
źródło
1
przydatne narzędzie do konwersji do unikania
iiz
23
Nie działa to poprawnie, jeśli zawartość lielementu zawija się w wielu wierszach; te zawinięte wiersze nie będą poprawnie wcięte.
Richard Ev
5
float: left; margin-left: -12px;on the: before, aby się tym zająć, @RichardEverett
Dudo
1
Pracuję dla jednej linii, ale nie działa, jeśli zawija się kilka linii.
VDarricau
1
Działa tylko dla pojedynczych pozycji list. Wieloliniowe spadną pod punktor zamiast wcięć.
Clarus Dignus
35

Możesz go zbudować:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}
defann
źródło
4
Jest to świetna technika, ponieważ jeśli nie wykonasz absolutnego pozycjonowania postaci, skończysz z „Bulletem” będącym w linii z resztą elementu listy. To jest bardzo nie-kuliste zachowanie. Dzięki tej poprawce „punktor” zostanie usunięty z lewej strony elementu listy, tak jak w przypadku zwykłego punktora.
General Redneck
Dziękuję Ci za to! Dokładnie to, czego potrzebowałem, aby moje kule znów się zachowywały.
tubaguy50035
1
To sprawia, że ​​jest to wspaniałe drzewo nawigacyjne '\21B3'! Dzięki! Zadziałało lepiej niż inne odpowiedzi tutaj. Zmieniono także padding-leftw moim projekcie na 1em, które dostosowuje się dobrze, gdy poziomy twojego drzewa zmieniają rozmiar.
ndm13
24

aktualizacja: w komentarzach Goerge mówi „Działa to w Chrome, Firefox i Edge, ale nie w Safari”.

To jest rozwiązanie W3C. Możesz go użyć w 3012!

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

https://drafts.csswg.org/css-lists/#text-markers

PHPst
źródło
12
Słyszałem, że w 3012 Internet Explorer wreszcie działa!
Mark K Cowan,
2
Działa to w przeglądarce Firefox 48, ale nie w Chromium 51 ani na moim telefonie / tablecie. On będzie musiał użyć li:beforerozwiązania.
CoderGuy123
1
Pracuje. Witamy w przyszłości, panie i panowie.
Mikko Ohtamaa
Dzięki za odpowiedź z przyszłości, ale w 2020 roku działa to w Chrome, Firefox i Edge, ale nie w Safari.
George
12

Obrazy nie są zalecane, ponieważ na niektórych urządzeniach (urządzenia Apple z wyświetlaczem Retina) mogą być wyświetlane w pikselach lub po powiększeniu. Dzięki postaci lista za każdym razem wygląda niesamowicie.

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

ul {
    list-style: none;
    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 pojedynczym wierszu. 1.2em to szerokość, jaką chcesz dla swojej postaci, zmień ją do swoich potrzeb. Nie zapomnij zresetować dopełnienia i marginesów dla elementów ul i li.

EDYCJA: Należy pamiętać, że rozmiar „1,2em” może się różnić, jeśli użyjesz innej czcionki w ul i li: before. Bezpieczniej jest używać pikseli.

NicolasBernier
źródło
Być może dodaj „wysokość: 1px” lub podobnie do li: wcześniej? Gwarantuje to, że zmiennoprzecinkowa nie rozciąga się w dół do następnego <li>, powodując niepożądane zagnieżdżenie.
Alan De Smet
Dlaczego wyświetlacz: blok; na li: wcześniej? czy to dlatego, że domyślnie jest wbudowany i nie możesz określić szerokości?
Alexander Solonik
6

Aby dodać gwiazdkę, użyj znaku Unicode 22C6.

Dodałem spację, aby zrobić małą przerwę między ligwiazdą a gwiazdą. Kod miejsca to A0.

li:before {
    content: '\22C6\A0';
}
Sztylet
źródło
4

Bardziej kompletny przykład odpowiedzi 222 :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

Dodałem właściwości star-hack, aby przywrócić domyślne style list w starszych wersjach IE. Możesz je wyciągnąć i dołączyć do warunkowego dołączania, jeśli chcesz, lub zastąpić rozwiązaniem opartym na obrazie tła. Moja skromna opinia jest taka, że ​​specjalne style punktorów zaimplementowane w ten sposób powinny z wdziękiem degradować się w nielicznych przeglądarkach, które nie obsługują pseudoselektorów.

Przetestowany w Firefox, Chrome, Safari i IE8-10 i renderuje się poprawnie we wszystkich.

pospi
źródło
text-indent: -1em;jest ważną właściwością, jeśli masz elementy listy wielowierszowej. Bez niego druga i kolejne linie są wyrównane z kulą, a nie z poprzednią linią.
Andris,
3
ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}
Iacchus
źródło
1

Przejrzałem całą listę i od 2020 roku są tam częściowo poprawne i częściowo niepoprawne elementy.

Odkryłem, że wcięcie i przesunięcie były największym problemem podczas korzystania z UTF-8, więc publikuję to jako rozwiązanie CSS zgodne z 2020 r., Używając jako przykładu punktora „pionowy trójkąt”.

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

użyj emjako jednostki, aby uniknąć konfliktu z rozmiarami czcionek

Beerswiller
źródło
0

Wypróbuj ten kod ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}
Charaf JRA
źródło
-1

Ten temat może być stary, ale tutaj jest szybka poprawka ul {list-style:outside none square;}lub ul {list-style:outside none disc;}itp.

następnie dodaj lewe wypełnienie do elementu listy

ul li{line-height: 1.4;padding-bottom: 6px;}
user2415803
źródło