Kevin Powell - Community•7mo ago

css pseudo element ::before

Hello, you masters of the CSS. I have reviewed the videos from Kevin on pseudo elements to try and see if he mentioned what i'm looking for. Would love your input on this: Right now, the element, when "selected" is getting a "selected" class that adds that background to it. What i would really like, would be something like:

.selected::before {
  position: absolute; // or fixed maybe
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: ...;
}

.selected::before {
  position: absolute; // or fixed maybe
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: ...;
}

what i'm trying to achive and haven't been successful is: - a ::before pseudo element, - that would stand behind my selected element (can be any element, inline or block) - would take the exact dimensions of the selected element is this possible? how? Thank you

11 Replies

capt_uhu•7mo ago

looks like the big thing you're missing for the pseudo element is a content: ''; declaration.

rubberduckiesOP•7mo ago

i forgot it here, yes, but if i use the css as is, with content, it becomes absolute to the page, full width and height

capt_uhu•7mo ago

need you'll need to put a position: relative; on the .selected

rubberduckiesOP•7mo ago

thing is, this can be on any element, i haven't designed... changing it indiscriminately to relative, may messup the layout of the page

capt_uhu•7mo ago

so to be more correct the .selected would just need to have a position of some kinda. Doesn't have to be "relative". The other thing to point out is that not all elements can have pseudo elements. Elements like img and form elements won't accept pseudos on their own. You can usually wrap a container around something to get around this though. Some concrete example like a codepen would be helpful.

rubberduckiesOP•7mo ago

🙂 thank you. I had a feeling this was a fool's errand. It was just an idea i had, i don't even know if it would work visually and functionally, for what i'm looking for anyways, waas just visual candy, it's working fine as is thanks for the help and clarification

capt_uhu•7mo ago

from the video it looks like your just adding a background? Why couldn't this just be a background image on the .selected itself?

rubberduckiesOP•7mo ago

i'll show you, oh, jesus, now that i look at it again even the before wouldn't make any difference in this situation lol, i need to start getting better sleep

ἔρως•7mo ago

what is .selected?

rubberduckiesOP•7mo ago

when you click on an element, any element on the page, it gets "selected" but yeah, even if what i asked for would work, it wouldn't fix what i was trying to fix, so i have already moved on thank you

clevermissfox•7mo ago

since i havent seen inset mentioned ill just add this: to have the pseudo element take the exact size of its 'parent' (whichever closest element that has a position: relative) and then on the psuedo give it an inset: 0; this is shorthand for top right bottom left.; if you just want the inline-size/width of the 'parent', you could set inset-inline: 0; or just the height inset-block: 0; and then adjust the other properties as needed e.g.

el::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: 2em 4em; /* it will be as tall as its parent bc inset-block: 0,  but for its width it will be 2em from the left and 4em from the right. same as setting left: 2em; right: 4em; */
}

el::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: 2em 4em; /* it will be as tall as its parent bc inset-block: 0,  but for its width it will be 2em from the left and 4em from the right. same as setting left: 2em; right: 4em; */
}

Gaming

Programming

css pseudo element ::before