EDIT : j'ai trouver une solution : 

<h1>Un texte avec <a class="jauge" href="#"><span class="jauge-remplissage"></span><span id="devant">un lien</span></a> et un effet de survol.</h1>

a {
  text-decoration: none;
  color: black;
	z-index:4;
}

.jauge {
  width: 100%;
  height: 200%;
  display: inline;
  position: relative;
}

.jauge-remplissage {
  transition: all 0.3s linear 0s;
  background-color: rgba(249, 105, 14, 0.5);
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  border-bottom: 2px solid #F9690E;
	z-index:0;
}

.jauge:hover .jauge-remplissage {
  height: 100%;
}

#devant {
	z-index:1;
	position: relative;
}

Salut je cherche à mettre mon texte devant le remplissage lors du survol; j'ai tester avec z-index mais ça ne fonctionne pas. Vous avez une piste à me proposer?

Merci d'avance!

Html :

<h1>Un texte avec <a class="jauge" href="#"><span class="jauge-remplissage"></span>un lien</a> et un effet de survol.</h1>

CSS :

a {
  text-decoration: none;
  color: black;
	z-index:4;
}

.jauge {
  width: 100%;
  height: 200%;
  display: inline;
  position: relative;
}

.jauge-remplissage {
  transition: all 0.3s linear 0s;
  background-color: rgba(249, 105, 14, 0.5);
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  border-bottom: 2px solid #F9690E;
}

.jauge:hover .jauge-remplissage {
  height: 100%;
	z-index:1;
}

-
Edité par HadockB 18 août 2017 à 20:10:48