Mav2287 Mav2287 - 6 months ago 30
CSS Question

Have Pseudo Element Inherit Parents Background Color

I have several pseudo elements that are related to varying different parent divs. All these divs have different background colors and I would like to before and after pseudo elements to inherit the background color of the parent div. I also want to do this without using JS and only CSS. I tried setting the background of the before and after elements to inherit, but they just show up transparent.


You can use background: inherit on the pseudo-elements:

#mydiv:after {
  background: inherit;

jsFiddle Demo