pseudo-élément et position absolute

2 pièce(s) jointe(s)

Bonjour,

Code:

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:

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:
Pièce jointe 632105

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

Code:

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.

Pièce jointe 632106

Une petite explication ?

Bonjour,

Citation:

Maintenant si j'enlève la position: absolute au pseudo ::after (en rouge) ...
(...)
Donc je comprends pas pourquoi la position doit être présente pour que le pseudo s'affiche..

Il y a plusieurs choses à prendre en compte :

• Par défaut les pseudo-élément sont en « modèle de boîte inline », display:inline, et n'occupent que l'espace nécessaire à afficher leur contenu. Les dimensions, via les propriétés width et height ne s'appliquent pas. En déclarrant un content: "" le pseudo-élément est pris en compte mais sa largeur est nulle, elle s'adapte au (non) contenu.

• Le fait de positionner ton pseudo-élément en position:absolute le fait passer en « modèle de boîte block », display:block, et dans ce cas les dimensions définies sont prises en compte, ton pseudo-élément est donc, dans ton cas, visible.

Tu pourrais également appliquer ce genre de régles :
Code:

1 2 3 4 5 6 7 8 .login-logout-popup::after { content: ""; display: inline-block; width: 15px; height: 15px; border-radius: 5px; background: #B22525; }
devrait s'afficher à la suite ...
Code:

1 2 3 4 5 6 7 8 .login-logout-popup::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 5px; background: #B22525; }
devrait s'afficher dessous.

Ok merci