Positionner un cercle sous le texte en CSS

Question

J'essaie de positionner un cercle 5px x 5px au centre du dessous des liens dans un nav pour indiquer quelle page est actuellement utilisée par l'utilisateur, mais je ne suis pas sûr de savoir comment Je devrais y aller.

Actuellement, j'ai ceci: Image

Je suis en train de le faire: Image

Voici le code:

 <ul id="nav-menu"> 
      <li class="nav-menu-item"> 
       <a href="ourwork.html">Our work</a> 
      </li> 
      <li class="nav-menu-item"> 
       <a href="#whatwedo">What we do</a> 
      </li> 
      <li class="nav-menu-item"> 
       <a href="#blog">Blog</a> 
      </li> 
      <li class="nav-menu-item"> 
       <a href="#contact">Contact</a> 
      </li> 
     </ul> 
    nav { 
    height: 70px; 
    background: #fff; 
    display: flex; 
    align-items: center; 
    padding: 0 75px; 
} 
#nav-logo-link { 
    flex: 1; 
} 
#nav-logo { 
    height: 35px; 
} 
#nav-menu { 
    list-style: none; 
    padding: 0; 
    white-space: nowrap; 
} 
#nav-menu > li { 
    display: inline; 
    margin: 0 10px; 
} 
#nav-menu > li > a { 
    text-decoration: none; 
    color: #000; 
} 

J'ai essayé de mettre un élément <i> dans le <li> et puis en le positionnant comme absolu, et tandis que je peux le mettre à la bonne hauteur (puisque la hauteur de nav est statique), quand je le mets comme left: 0;, il saute sur le côté gauche de la navigation entière. J'ai essayé de mettre un <div> dans le <li> mais cela n'a rien fait.

Des idées?

Answer 1

Vous pouvez utiliser un pseudo-élément après pour faire cela avec un caractère UTF8, voir le suivant fiddle.

Modifier: Je suppose que vous voulez que cela se produise lorsque l'utilisateur clique sur un lien et est alors sur cette page, donc pourquoi j'ai utilisé un attribut de données, la réponse précédente le fait en vol stationnaire.

J'ai fait trois modifications à votre code ici:

1. Position Ajouté: relative; à vos points d'ancrage, cela me permet d'utiliser la position: absolute dans le bloc suivant css:

   nav menu> li> a {

   text-decoration: none; 
   color: #000; 
   position: relative; 
   

   }

2. Ajouté l'élément pseudo absolument positionné à 50% de la largeur de l'ancre, j'ai aussi défini sa largeur et ensuite je l'ai centré en utilisant une marge négative de la moitié de sa largeur. Cela dépend de la configuration de l'élément sélectionné avec un peu de javascript, voir le point 3.Vous pouvez ajuster la couleur:

   nav menu> li> une [données selected = true]: après {

   content: "\25CF"; 
   position: absolute; 
   top: 1.1em; 
   left: 50%; 
   width: 10px; 
   margin-left: -5px; 
   color: cadetblue; 
   

   }

3. Ajout d'une données selected = "true "Attribuer à l'ancre sélectionnée, vous devez le faire en javascript car une ancre différente est sélectionnée. Cela permet au css de l'étape 2 de sélectionner l'ancre droite.

Answer 2

Cela peut se faire en ajoutant une règle nav-menu-item:after{ qui ajoute un cercle après la balise <li>, réglez l'affichage pour le #nav-menu > li { à inline-block et vous devriez obtenir le résultat souhaité sur le vol stationnaire

nav { 
 
    height: 70px; 
 
    background: #fff; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 0 75px; 
 
} 
 

 
#nav-logo-link { 
 
    flex: 1; 
 
} 
 

 
#nav-logo { 
 
    height: 35px; 
 
} 
 

 
#nav-menu { 
 
    list-style: none; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
} 
 

 
#nav-menu > li { 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
} 
 

 
#nav-menu > li > a { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 
.nav-menu-item:hover:after { 
 
    content: "\25CF"; 
 
    display: block; 
 
    opacity: 1; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.nav-menu-item::after { 
 
    content: "\25CF"; 
 
    opacity: 0; 
 
    color: #1ba9b3; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 5px; 
 
    height: 5px; 
 
}

<nav> 
 
    <ul id="nav-menu"> 
 
    <li class="nav-menu-item"> 
 
     <a href="ourwork.html">Our work</a> 
 
    </li> 
 
    <li class="nav-menu-item"> 
 
     <a href="#whatwedo">What we do</a> 
 
    </li> 
 
    <li class="nav-menu-item"> 
 
     <a href="#blog">Blog</a> 
 
    </li> 
 
    <li class="nav-menu-item"> 
 
     <a href="#contact">Contact</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Si vous voulez afficher le point quand elle est sélectionnée, vous pouvez utiliser javascript pour définir la classe pour être <li class="nav-menu-item selected"> alors à vous changeriez css .nav-menu-item:hover:after { à .nav-menu-item.selected:after {

Espérons que cela aide!