[Résolu] Puce sous les liens d'un menu horizontal en CSS.

Bonjour à toutes et tous,

Je reviens parmi vous (ça fait bien longtemps !!) parce que je sèche sur quelque chose de sûrement très simple.

Je viens de terminer une formation dans l'informatique (technicien sup réseau système) et suis en train de réaliser un site web CV perso (un resume cv).

Voici ce sur quoi je bloque:

J'ai un menu horizontal en css et je souhaite ajouter une puce sous chaque lien (image ci-dessous), je ne vois pas comment la placer en dessous au milieu du lien.



je veux ajouter cette puce très simple de chez fontawesome: https://fontawesome.com/icons/circle?style=solid

      <nav>
                <ul>
                    <li><a href="#">A propos</a></li>
                    <li><a href="#">Expériences</a></li>
                    <li><a href="#">Formation</a></li>
                    <li><a href="#">Compétences</a></li>
                    <li><a href="#">Intérêts</a></li>
                    <li><a href="#">Contact</a></li>
                </ul> 
     </nav>

nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

nav ul li{
    float: left;
    padding-right: 16px;
    
}

nav ul li a{
    display: block;
    color: #2c3e50;
    font-family: 'Poppins light', sans-serif;
    font-size: 17px;
    text-decoration: none;
}

nav ul li a:hover{
    color: #2980b9;
}

pouvez-vous m'aider ?

merci à vous
Modifié par Iro (28 May 2018 - 14:03)

Tiens, un exemple

ici

Un grand merci à vous deux pour cette réponse rapide !
J'étais parti à un moment sur :after mais sans savoir comment positionner ma puce par la suite, maintenant je sais.

Vous êtes mes sauveurs

ça marche !

encore merci

bazooka07 a écrit :

After est un pseudo-élément. Donc c'est "::"

héhé

Mais j'ai jamais compris le coup des "::" ou ":"
la différence .. les deux fonctionnent ... ?

bazooka07 a écrit :

Les navigateurs acceptent les 2 écritures

Tout simplement car l'écriture avec les deux-points doublés a été introduite en Css3.
En Css2 un seul deux-points suffisait et fonctionnait mais afin justement d'introduire une distinction entre un état/condition (soit quelque-chose de passif) et du contenu généré, le W3C a décrété que dans ce cas doubler le caractère serait mieux.
Néanmoins dans un soucis de rétro-compatibilité les navigateurs ont gardés les deux écritures.
Comme depuis personne n'est revenu là dessus, à chaque mise à jour des navigateurs ceci reste vrai et comme c'est là parti j'ai bien l'impression qu'à la version 199 du navigateur cela le restera encore (heu je m'avance peut-être un peu là )
Modifié par Greg_Lumiere (29 May 2018 - 11:44)