4 replies

Inset and pseudo elements

Hi!

Is there a way of setting the red stripe to be glued to the left side of the

.content

.content

container (inset-inline-start)?
I thought that the pseudo element, when container is

position: relative;

position: relative;

and pseudo element is

position: absolute

position: absolute

, would use the container as the layout referance, and not the viewport (or is it

body

body

html

html

?). Would love to avoid the position of the red stripe to be a magic number thing, especially for responsiveness ...

Design:
https://github.com/AMarlonG/Materiality/blob/main/assets/11.jpg

Repo:
https://github.com/AMarlonG/Materiality

4 replies

Hi!

Is there a way of setting the red stripe to be glued to the left side of the

.content

.content

container (inset-inline-start)?
I thought that the pseudo element, when container is

position: relative;

position: relative;

and pseudo element is

position: absolute

position: absolute

, would use the container as the layout referance, and not the viewport (or is it

body

body

html

html