Symbole de puce personnalisé pour les éléments <li> dans <ul> qui est un caractère normal et non une image
Je réalise que l'on peut spécifier qu'un graphique personnalisé soit un caractère de remplacement, en utilisant l'attribut CSS:
list-style-image
Et puis en lui donnant 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 pointer dessus. Je préférerais simplement demander à la liste non ordonnée d'utiliser un symbole plus comme symbole de puce.
Cela peut-il être fait ou suis-je obligé d'en faire un graphique en premier?
Ce qui suit est tiré de Taming Lists :
Il peut arriver que vous ayez une liste, mais que vous ne vouliez pas de puces ou que vous souhaitiez utiliser un autre caractère à la place de la balle. Encore une fois, CSS fournit une solution simple. Ajoutez simplement style de liste: aucun; à votre règle et forcer les LI à afficher avec des retraits suspendus. La règle ressemblera à quelque chose comme ceci:
ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }Le remplissage ou la marge doivent être mis à zéro, l'autre à 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 de ce montant, créant un retrait suspendu.
Le code HTML contiendra notre UL standard, 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 de droite:».
" Objet 1
»Point 2
»Point 3
»Point 4
»Point 5 nous allons faire
un peu plus long pour que
ça va envelopper
C'est une réponse tardive, mais je viens juste de trouver ceci ... Pour corriger l'indentation des lignes qui se terminent, essayez de cette façon:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
}
Tant de solutions.
Mais je pense toujours que des améliorations sont possibles.
Avantages:
- code très compact
- fonctionne avec n'importe quelle taille de police
(aucune valeur de pixel absolue n'est 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;
}<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>C'est la solution du W3C. Pour le moment, cela fonctionne au moins dans Firefox.
ul { list-style-type: "????"; }
/* Sets the marker to a ???? emoji character */
Voici la meilleure solution que j'ai trouvée jusqu'à présent. Cela fonctionne très bien et 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 caractère dans un bloc flottant avec une largeur fixe afin que le texte reste aligné si il est trop long pour tenir sur une seule ligne .1.2em est la largeur souhaitée pour votre personnage, changez-le 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/beforfter.html J'utilise ceci pour insérer des guillemets géants autour des guillemets ...
HTH.
Ma solution utilise le positionnement pour que les lignes automatiquement alignées soient correctement alignées. Ainsi, vous n’aurez pas à vous soucier de régler padding-right sur le li: avant.
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>Il est conseillé de qualifier le style du <li> afin qu'il n'affecte pas les éléments de la liste <ol>. 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 prête à l'emploi:
<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>.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) */
}<ul class="list-dash">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>Il est intéressant de noter que je ne pense pas que les solutions affichées sont assez bonnes, car elles reposent sur le fait que le personnage utilisé a une largeur de 1 em, ce qui n’a pas besoin de l'être (à l'exception peut-être de la réponse de John Magnolia, qui utilise toutefois des 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 */
}<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>Cela présente les avantages (par rapport aux autres solutions):
- Cela fait ne comptez pas sur la largeur du symbole comme vous le voyez dans l'exemple. J'ai utilisé deux personnages pour montrer que cela fonctionne même avec des balles larges. Si vous essayez cela dans d'autres solutions, vous obtenez un texte mal aligné (en fait, il est même visible avec le symbole * dans les zooms les plus hauts).
- Cela vous donne un total de contrôle de l'espace utilisé par les puces. Vous pouvez remplacer 30px par n'importe quoi (même 1em, etc.). Il suffit de ne pas oublier de le changer aux trois endroits.
- Si vous donne total contrôle de positionnement de la balle. Il suffit de remplacer le
text-align: center;par tout ce qui vous convient. Par exemple, vous pouvez essayercolor: red; text-align: right; padding-right: 5px; box-sizing: border-box;.__ ou, si vous n’aimez pas jouer à border-box, il vous suffit de soustraire le remplissage (5px) de la largeur (c’est-à-dire la largeur: 25px dans cet exemple). Il y a beaucoup d'options. - Il n'utilise pas de flotteurs, il peut donc être contenu n'importe où.
Prendre plaisir.
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;
}
Em style de tiret:
ul.emdash {
list-style-type: none;
list-style-position: inside;
text-indent: -1.25em;
}
ul.emdash > li:before {
content: "\2014\00A0"; /* em dash + space*/
}