Mav2287 Mav2287 - 1 year ago 107
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.

Answer Source

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

#mydiv:after {
  background: inherit;

jsFiddle Demo