Symbole de puce personnalisé pour les éléments dans qui est un caractère régulier, et non une image

Je me rends compte que l’on peut spécifier un graphique personnalisé comme caractère de remplacement, en utilisant l’atsortingbut CSS:

list-style-image 

Et puis lui donner une URL.

Cependant, dans mon cas, je veux juste utiliser le symbole ‘+’. Je ne veux pas avoir à créer un graphique pour cela et ensuite le signaler. Je préfère simplement demander à la liste non ordonnée d’utiliser un symbole plus comme symbole de la puce.

Est-ce que cela peut être fait ou est-ce que je suis obligé d’en faire un premier graphique?

Ce qui suit est cité de Taming Lists :

Il peut y avoir des moments où vous avez une liste, mais vous ne voulez pas de puces, ou vous voulez utiliser un autre caractère à la place de la puce. Là encore, CSS fournit une solution simple. Ajoutez simplement le style de liste: aucun; à votre règle et forcer les LI à afficher avec des retraits suspendus. La règle ressemblera à ceci:

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

Le remplissage ou la marge doit être défini sur zéro, l’autre étant défini sur 1em. Selon la puce que vous choisissez, vous devrez peut-être modifier cette valeur. Le retrait de texte négatif entraîne le déplacement de la première ligne vers la gauche, créant ainsi une indentation suspendue.

Le code HTML contiendra notre norme UL, mais avec le caractère ou l’entité HTML que vous souhaitez utiliser à la place de la puce précédant le contenu de l’élément de liste. Dans notre cas, nous utiliserons », la citation double à angle droit:».

” Objet 1
»Point 2
»Point 3
»Article 4
»Point 5 nous ferons
un peu plus longtemps pour que
il va envelopper

Ceci est une réponse tardive, mais je suis juste tombé sur ceci…

 ul { list-style: none; margin-left: 0; padding-left: 0; } li { padding-left: 1em; text-indent: -1em; } li:before { content: "+"; padding-right: 5px; } 

Ceci est la solution W3C. Pour le moment, cela fonctionne au moins dans Firefox.

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

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

Tant de solutions.
Mais je pense toujours qu’il ya place à amélioration.

Avantages:

  • code très compact
  • fonctionne avec n’importe quelle taille de police
    (aucune valeur de pixel absolue contenue)
  • aligne parfaitement les rangées
    (pas de léger décalage entre la première ligne et les lignes suivantes)
 ul { position: relative; list-style: none; margin-left: 0; padding-left: 1.2em; } ul li:before { content: "+"; position: absolute; left: 0; } 
 
  • Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ulsortingces posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.
  • 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.

Voici la meilleure solution que j’ai trouvée jusqu’à présent. Cela fonctionne très bien et c’est multi-navigateur (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; } 

L’important est d’avoir le personnage dans un bloc flottant avec une largeur fixe pour que le texte rest aligné s’il est trop long pour tenir sur une seule ligne. 1.2em est la largeur que vous voulez pour votre personnage, changez-la pour vos besoins.

Vous pouvez utiliser le pseudo-sélecteur :before pour insérer du contenu devant l’élément de liste. Vous pouvez trouver un exemple sur Quirksmode, à l’ adresse http://www.quirksmode.org/css/befor plastique.html. Je l’utilise pour insérer des citations géantes autour des citations de blocs …

HTH.

Ma solution utilise le positionnement pour que les lignes enveloppées s’alignent automatiquement correctement. Donc, vous n’avez pas à vous soucier de définir un remplissage à droite sur le li: before.

 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: "+"; } 
 
  • 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
  • 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
  • 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
  • Item 4
  • Item 5

Il est conseillé de qualifier le style du

  • afin qu’il n’affecte pas les éléments

      liste. Alors:

       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 fournit une excellente solution:

        
      • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
       .list-dash li, .list-bullet li { position: relative; list-style-type: none; /* disc circle(hollow) square none */ text-indent: -2em; } .list-dash li:before { content: '— '; /* em dash */ } .list-bullet li:before { content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */ } 
       
      • Item 1
      • Item 2
      • Item 3
      • Item 4

      Je préfère utiliser la marge négative, vous donne plus de contrôle

       ul { margin-left: 0; padding-left: 20px; list-style: none; } li:before { content: "*"; display: inline; float: left; margin-left: -18px; } 

      Chose intéressante, je ne pense pas qu’aucune des solutions postées soit suffisante, car elles reposent sur le fait que le caractère utilisé est large, ce qui n’est pas forcément le cas (à l’exception peut-être de la réponse de John Magnolia compliquer les choses d’une autre manière). Voici ma tentative:

       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 */ } 
       
      • Item 1
      • Item 2
      • 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
      • Item 4
      • Item 5

      essaye ça

        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; } 
            

      Example of unordered lists:

      • Coffee
      • Tea
      • Coca Cola
      • Coffee
      • Tea
      • Coca Cola

      Example of ordered lists:

      1. Coffee
      2. Tea
      3. Coca Cola
      1. Coffee
      2. Tea
      3. Coca Cola