web-dev-qa-db-fra.com

Puis-je utiliser CSS pour ajouter un point à un élément?

Question assez simple, mais je ne suis pas sûr que ce soit possible. Je souhaite ajouter une image agissant comme une puce dans tous les éléments <h1>. Je sais que je peux y arriver en:

<span class='bullet'></span><h1>My H1 text here</h1>

avec css:

.bullet{
    background: url('bullet.png') no-repeat;
    display:inline-block;
    vertical-align: middle;
    background-size:100%;
    height:25px;
    width:25px;
    margin-right: 5px;
}

mais existe-t-il un moyen automatique de faire la même chose? Je pensais quelque chose comme:

h1{
    list-style-image: url('bullet.png');
}

mais cela ne semble fonctionner qu'avec les éléments <ul>. Je ne veux vraiment pas avoir à coller l'élément <span> partout avant l'élément <h1>. Des idées?

htmlcsscss-selectorshtml-listslistitem
27
Sablefoste

Bien que vous puissiez utiliser un pseudo-sélecteur :before pour ajouter un caractère "-" ou "•" devant votre élément, il ne se comporte pas vraiment comme un point. Votre élément peut ressembler à une balle, mais ce n'est qu'un sale bidouillage, vraiment, et devrait être évité! 

Pour que votre élément ressemble (1) à une puce et (2) à un comportement, vous devez définir les attributs display, list-style-type et list-style-position de cet élément.

CODE D'EXEMPLE

h1 {
    display: list-item;          /* This has to be "list-item"                                               */
    list-style-type: disc;       /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type     */
    list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}
<h1>My H1 text here</h1>

LE FIDDLE

http://jsfiddle.net/L15a53cb/

36
John Slegers

Vous pouvez faire quelque chose comme ça:

h1:before {
    content:"• ";
}

Voir Fiddle:

http://jsfiddle.net/6kt8jhfo/6/

34
sinisake

Vous pouvez utiliser le pseudo-sélecteur :before pour ajouter ce que vous voulez avant votre tag. 

h1:before {
    content: "- "
}
<h1>My H1 text here</h1>

6
AleshaOleg

Quelque chose comme ça devrait marcher

h1, h2, h3 {
  background: url("the image link goes here") 0 center no-repeat;
  padding-left: 15px; /* change this to fit your needs */
}
2
Ben

Le moyen très simple de créer une puce à l'aide de la commande before css consiste à utiliser la famille de polices ... de cette manière, il n'est pas nécessaire d'inclure des graphiques, etc.

voici le code de la classe: 

.SomeClass:before {
  font-family: "Webdings";
   content: "=  ";

{

1
Who Knows

Donnez un nom de classe au paragraphe ou à un élément et appliquez le code ci-dessous (J'ai donné le nom de classe sous le nom bullet):

.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}
0
user8523590

Nope, list-style et list-style-image ne sont que pour les balises ul et ol il vous faudra revenir à votre première méthode ou créer quelque chose avec js

http://www.w3schools.com/css/css_list.asphttp://www.w3schools.com/cssref/pr_list-style-type.asp

0
Ahmad

list-style-type est réservé à ul uniquement . Vous pouvez utiliser <h1 class="bullet"> avec le pseudo-élément :before.

0
mwl