Discussion :

[haddocks]

Bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 <a> <!-- ***position relative*** -->
                <img src="img/user.png" alt="">
                <div class="login-logout-popup"> <!-- ***position absolute*** -->
                    <p class="account-info">Loged in as, name</p>
                    <button class="btn" id="user-btn">Log out</button>
                </div>
 </a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.login-logout-popup {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  top: 40px;
  width: 200px;
  transition: 0.5s;
  border: 2px solid #f5f5f5;
}
 
.login-logout-popup::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: rgb(178, 37, 37);
  border-radius: 5px;
}

J'obtiens se résultat:


Maintenant si j'enlève la position: absolute au pseudo ::after (en rouge) ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.login-logout-popup::after {
  content: "";
 
  width: 15px;
  height: 15px;
  background: rgb(178, 37, 37);
  border-radius: 5px;
}

... Il disparaît mais semble toujours présent quand je regarde avec Devtool de Chrome.
Pour moi position: absolute dois pouvoir me donner seulement la possibilité le pseudo avec les propriétés de positionnement.
Donc je comprends pas pourquoi la position doit être présente pour que le pseudo s'affiche.



Une petite explication ?