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 ?

[NoSmoking]

Bonjour,

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 :

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

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 :

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

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.

[haddocks]

Ok merci