Symbole de puce personnalisé pour les éléments <li> dans <ul> qui est un caractère normal et non une image

125

Je me rends compte que l'on peut spécifier un graphique personnalisé pour être un caractère de puce 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, puis à le pointer. Je préfère simplement demander à la liste non ordonnée d'utiliser un symbole plus comme symbole de puce.

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

— idStar
source

81

Ce qui suit est cité à partir 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 puce. Encore une fois, CSS fournit une solution simple. Ajoutez simplement le style de liste: aucun; à votre règle et forcez l'affichage des LI avec des retraits suspendus. La règle ressemblera à ceci:
ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}
Soit le remplissage ou la marge doit être défini sur zéro, l'autre 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 de ce montant, créant un retrait suspendu.

Le 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 double citation à angle droit:».

»Item 1
» Item 2
»Item 3
» Item 4
»Item 5 nous allons faire
un peu plus longtemps pour qu'il
s'enroule

— Évangéliste API TJ WealthEngine
source

1

Votre solution a fonctionné, en combinaison avec le pseudo-sélecteur: before que vous et @Tieson T. pointez tous les deux. J'ai aimé que vous disiez comment les différents attributs de <UL> fonctionnent de concert pour imiter l'indentation des balles.

— idStar

9

Voici comment je l'ai mis ensemble, qui a fonctionné: ul {font-size: 14px; hauteur de ligne: 16px; style liste: aucun; marge gauche: 0; padding-left: 1em; retrait de texte: -1em; } li: avant {contenu: "+"; } J'ai dû mettre un espace après le symbole +, mais il semble raisonnablement bien aligné.

— idStar

6

Malheureusement, avec cette méthode, le signe puce est inclus dans les sélections, ce qui n'est pas le cas pour les puces normales.

— Konrad Höffner

169

C'est une réponse tardive, mais je viens de tomber sur ceci ... Pour obtenir l'indentation correcte sur toutes les lignes qui s'enroulent, essayez-le 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;
}

— Mike T
source

1

Pour moi, cela fonctionne mieux d'utiliser ch comme unité de mesure, en particulier pour tenir text-indent: -2chcompte du signe + et de l'espace après, puis padding-right: 1chpour ajouter cet espace. Pourtant, un gros +1.

— cobaltduck

44

Tant de solutions.
Mais je pense toujours qu'il y a 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 lignes
(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>

Développer l'extrait

— Jpsy
source

2

c'est le meilleur

— user3168511

1

C'est une meilleure réponse à mon avis car elle indique comment vous pouvez également personnaliser d'autres détails. Et il a également le "extrait de code d'exécution" attaché!

— Ionuț Ciuta

1

Cela devrait être la réponse. Propre et simple

— EvilDr

1

Je cherchais une solution utilisant une image et j'ai essayé beaucoup de réponses, mais celle-ci fonctionnait le mieux pour moi! J'ai pu utiliser content: url('link-to-my-asset.svg');et définir la largeur de l'image et le remplissage entre la puce et le contenu. Merci!

— AnnieP

C'est une bonne réponse. Cependant, j'avais besoin d'une solution qui pourrait également prendre en charge le nombre de colonnes

— Kushagr Arora

29

C'est la solution W3C. Fonctionne dans Firefox et 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>

Développer l'extrait

— PHPst
source

2

Bien que cela semble fonctionner dans les versions actuelles de Firefox, le résultat est extrêmement moche: une puce personnalisée est placée juste devant le contenu du texte (s'accrochant dessus), presque comme si elle li:before {content:"…";}était utilisée sans aucune autre indentation ni alignement.

— Anton Samsonov

19

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 caractère dans un bloc flottant avec une largeur fixe afin que le texte reste 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 selon vos besoins.

— NicolasBernier
source

C'est facilement la meilleure solution que j'ai trouvée.

— Charles Roper

ab-utiliser de floatnouveau? ... naah.

10

Vous pouvez utiliser le :beforepseudo-sélecteur pour insérer du contenu devant l'élément de liste. Vous pouvez trouver un exemple sur Quirksmode, sur http://www.quirksmode.org/css/beforfter.html . J'utilise ceci pour insérer des citations géantes autour des blockquotes ...

HTH.

— Tieson T.
source

10

Ma solution utilise le positionnement pour que les lignes enveloppées s'alignent automatiquement correctement. Vous n'avez donc pas à vous soucier de définir padding-right 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: "+";
}

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

Développer l'extrait

— user648519
source

8

Il est conseillé de qualifier le style du <li>afin qu'il n'affecte pas les <ol>éléments de la 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;
}

— silverliebt
source

8

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>

Développer l'extrait

— sdw
source

4

.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>

Développer l'extrait

— bob
source

Up a voté pour cela juste à cause de / * copiez et collez une puce du HTML dans le navigateur dans le css (sans utiliser de codes ascii) * /

— kheya

2

Style de tiret 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*/
}

— dmartinezfernandez
source

1

Je préfère utiliser une 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;
}

— John Magnolia
source

1

Il est intéressant de noter qu'aucune des solutions publiées n'est assez bonne, car elles reposent sur le fait que le caractère utilisé mesure 1em de large, ce qui n'a pas besoin de l'être (à l'exception peut-être de la réponse de John Magnolia qui utilise cependant des flotteurs qui peuvent 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>

Développer l'extrait

Cela présente ces avantages (par rapport aux autres solutions):

Il ne dépend pas de la largeur du symbole comme vous le voyez dans l'exemple. J'ai utilisé deux caractères pour montrer que cela fonctionne même avec des balles larges. Si vous essayez cela dans d'autres solutions, vous obtenez le texte mal aligné (en fait, il est même visible avec le symbole * dans les zooms plus élevés).
Il vous donne un contrôle total de l'espace utilisé par les balles . Vous pouvez remplacer 30px par n'importe quoi (même 1em, etc.). N'oubliez pas de le changer aux trois endroits.
Si vous donne un contrôle total du positionnement de la balle . Remplacez simplement le text-align: center;par quelque chose à votre goût. Par exemple, vous pouvez essayer color: red; text-align: right; padding-right: 5px; box-sizing: border-box; ou si vous n'aimez pas jouer avec border-box, soustrayez simplement le padding (5px) de width (c'est-à-dire width: 25px dans cet exemple). Il existe de nombreuses options.
Il n'utilise pas de flotteurs et peut donc être contenu n'importe où.

Prendre plaisir.

— gorn
source

1

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}

<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>

Développer l'extrait

— Viraj Giri
source

Merci - C'est très propre et j'ai oublié le !important, qui était vital pour que mon CSS personnalisé dans Blogspot fonctionne

— velkoon

-2

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

<!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>

Développer l'extrait

— venkat
source