web-dev-qa-db-fra.com

Utilisez & middot; au lieu de balle pour <ul>

J'ai trouvé un article sur la propriété list-style-type en CSS, mais il ne répertorie pas le & middot; (·) En option, par opposition à la valeur par défaut disc ou & bullet; (•). Est-il possible de faire cela avec HTML ou CSS?

htmlcsshtml-lists
21
steveo225

CSS (fonctionne dans tous les navigateurs supportant :before et content:):

li:before { 
    content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
    list-style:none;
    text-indent:-.5em; /* helps make it look more like it's a bullet. */
}

Attention: Ce n'est pas un vrai style de liste. Par conséquent, lorsque vous avez enveloppé des listes, cela aura l'air drôle. Cela peut peut-être être atténué par un retrait textuel négatif de quelques unités pour qu'il fonctionne davantage comme un style de liste.

Une autre implémentation:

li:before {
    content: '\b7\a0';
    position:absolute;
    right:100%
}
li {
    list-style:none;
    position:relative;
}

Cette version semble mieux fonctionner. J'utilise souvent :before et :after pour ajouter des éléments tels que des bordures, mais si vous ajoutez une puce, j'imagine que ce n'est pas le cas. Même s'il s'agit d'une suggestion alternative, c'est probablement la solution préférée.

60
Levi Morrison

Oui! Vous pouvez utiliser la pseudo-classe before pour insérer le caractère avant chaque élément.

.DotList li:before
{
    content: "·";
}

Ici est un exemple jsFiddle.

3
Maxpm

list-style-type ne sélectionne pas le caractère à utiliser, il sélectionne un marqueur abstrait à utiliser. Notez les états standard:

La valeur "aucun" ne spécifie aucun marqueur, sinon il existe trois types de marqueur: les glyphes, les systèmes de numérotation et les systèmes alphabétiques.

Les glyphes sont spécifiés avec disque, cercle et carré. Leur rendu exact dépend de l'agent utilisateur.

Pour plus de contrôle sur le marqueur, vous devez définir une image à l'aide de list-style-image ou utiliser le pseudo-élément :before et la propriété content , en définissant list-style-type sur 'aucune'. :before et la propriété content ne sont pas pris en charge dans IE 7 et versions antérieures; vous devez donc utiliser list-style-image pour prendre en charge IE 7 ou simplement laisser IE 7 utiliser un marqueur différent. . Vous pouvez utiliser des commentaires conditionnels pour cibler IE 7 et les versions antérieures.

2
outis

Vous pouvez utiliser une image de fond dans LI

Un exemple possible
http://css.maxdesign.com.au/listamatic/vertical05.htm

1
Brian Hoover

Un nombre limité d'options disponibles pour list-style-type sont définies dans la spécification CSS2 .

Vous pouvez utiliser:

  • disque
  • cercle
  • carré
  • décimal
  • décimal-zéro
  • bas-romain
  • haut romain
  • grec inférieur
  • bas-latin
  • haut latin
  • arménien
  • géorgien
  • alpha inférieur
  • alpha supérieur
  • none

Si vous voulez quelque chose de personnalisé, utilisez la propriété list-style-image

Si vous appelez des navigateurs prenant en charge le contenu généré, vous pouvez utiliser:

li:before {
  content: '\[utf-8 hex code for character]';
  position: absolute;
  right: 100%;
}

li {
  position: relative;
}
1
zzzzBov

Au lieu de li:before, qui affecte tous les li (dans le menu, les onglets, l'accordéon) de la page, j'ai utilisé ceci:

ul {
	list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC');
}
  
<ul>
  <li>This is my middot</li>
</ul>

0
M.S.