Ancestors

Toot

Written by Silvestar Bistrović on 2024-11-18 at 12:11

Help needed!

Does anyone know why :before and :after pseudo-elements are not showing when I toggle the .active class?

=> View attached media

=> More informations about this toot | More toots from cita@mastodon.social

Descendants

Written by Silvestar Bistrović on 2024-11-18 at 12:14

Codepen: https://codepen.io/CiTA/pen/bGXyGLb?editors=1111

=> More informations about this toot | More toots from cita@mastodon.social

Written by Silvestar Bistrović on 2024-11-18 at 12:16

I wouldn't have noticed this behavior without the checkbox animation, which restarts every time.

=> More informations about this toot | More toots from cita@mastodon.social

Written by CSS by T. Afif :verified: on 2024-11-18 at 13:44

@cita I think it's has to do with the use of display: none. The browser no more generate boxes for pseudo element so they disappear from the DOM tree

=> More informations about this toot | More toots from css@front-end.social

Written by Silvestar Bistrović on 2024-11-18 at 13:46

@css Yeah, it works as expected when I use other techniques to hide the section. Do you have any documentation on this behavior?

=> More informations about this toot | More toots from cita@mastodon.social

Written by CSS by T. Afif :verified: on 2024-11-18 at 13:52

@cita not sure if there is any explicit explanation relative to pseudo element but the definition of "display: none" says "The element and its descendants generate no boxes or text sequences." so I assume the browser will hide them because they generate no boxes.

=> More informations about this toot | More toots from css@front-end.social

Written by Silvestar Bistrović on 2024-11-18 at 17:26

@css Yes, that's the answer I got on BlueSky, too.

That's so weird.

I don't remember seeing this issue before. o_O

=> More informations about this toot | More toots from cita@mastodon.social