Have Pseudo Element Inherit Parents Background Color

Question

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 1

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

#mydiv:after {
  background: inherit;
}

jsFiddle Demo