Se connecter

Informatique

Création de sites web

Sujet : Comment faire cet effet CSS?
1
AIkapote
Niveau 3
06 mars 2018 à 12:15:49

https://image.noelshack.com/fichiers/2018/10/2/1520334810-effetcss.png

J'ai essayé quelque chose comme ceci:

.active { border-bottom: 3px green; padding-bottom: -5px; }

Mais ça ne marche pas

Quelqu'un saurait m'aider? merci

fanof_banni
Niveau 10
06 mars 2018 à 21:06:19

A la place de ton padding-bottom, tu peux réduire la hauteur de la ligne.
line-height: 3em;
Par contre si t'avais un retour à la ligne dans un de tes menus, les lignes se superposeraient les unes sur les autres et ce serait illisible.
Une autre solution serait de foutre une div dans une li et de la cacher, sauf quand elle se trouve fille d'un élément ayant la classe .active


HTML
<ul>
   <li>Accueuil
       <div></div>
   </li>
   <li>A propos
      <div>/div>
   </li>
</ul>

CSS
.active div{
   display: block;
}
div{
   display: none;
   height: 10px;
   background-color: green;
   position: relative;
   bottom: 10px;
   z-index: -1;
20_cent_2017
Niveau 10
07 mars 2018 à 07:15:33

Ça marcherais mieux avec un animate...

LynxApaise
Niveau 10
07 mars 2018 à 16:33:17

les pseudo éléments ::before ::after :ok:

en position absolute, une taille définie et une couleur en background. :ok:

FurnaceOperator
Niveau 9
08 mars 2018 à 04:13:56

Le 07 mars 2018 à 16:33:17 lynxapaise a écrit :
les pseudo éléments ::before ::after :ok:

en position absolute, une taille définie et une couleur en background. :ok:

Et un content:" "

TintinPosey3
Niveau 10
10 mars 2018 à 23:59:18

Go Codepen :ok:

1
Sujet : Comment faire cet effet CSS?
   Retour haut de page
Consulter la version web de cette page