Les pastilles de couleur :before et :after h2

Je suis en train de mettre des pastilles de couleur avant et après h2.

C'est mon CSS;

h2:after {
 width:10px;
 height:10px;
 border-radius:50%;
 background: #b83b3b;
}

h2:after {
 width:10px;
 height:10px;
 border-radius:50%;
 background: #b83b3b;
}

Mais pas de points montrent.

Tous les fils?

Merci!

Jaeeun

Ce genre de points de couleur? Comme "..." ?
utilisez cette content:'.' de la propriété.

OriginalL'auteur Jaeeun Lee | 2013-12-14

  1. 9

    Spécifier une valeur pour le content de la propriété, puis ajouter display:inline-block

    jsFiddle exemple

    h2:after, h2:before {
    content:"\A";
    width:10px;
    height:10px;
    border-radius:50%;
    background: #b83b3b;
    display:inline-block;
}
    Vous pouvez spécifier une chaîne vide - il n'a pas à se composent d'espaces (même si les espaces sont réduits toute façon si c'est le seul contenu). Lorsque vous négligez de spécifier une valeur content, la valeur initiale utilisée est none, qui est comme une valeur null et donc distincte à partir d'une chaîne vide.

    OriginalL'auteur Josh Crozier

  2. 0

    Je veux juste ajouter une autre façon que je suis aide - c'est une autre de prendre sur Josh réponse qui utilise un réel caractère de point, ce qui vous permet d'utiliser text-shadow et autres styles de texte si vous le souhaitez. Je pense que c'est aussi plus facile à la verticale du centre (à mon avis). J'ai ajouté sur un text-shadow pour ajouter un bel effet de lumière que je l'utilise pour indiquer l'état.

    jsFiddle exemple

    h2:after, h2:before {
    content: "•";
    color: #b83b3b;
    text-shadow: #b83b3b 0 0 5px;
    margin:0 10px;
}

    OriginalL'auteur Stephen Smith