css - Is there anyway to extend the value of a property of a parent element to a different property of a child element? -

here's specific situation. need create 'mask' on element. i've got border on element, before pseudo element inside animated, , after pseudo element same 0 opacity color, , border 'mask', sits neatly within border of element (the effect cleanly cut off animating bit before reaches border).

that's fine (awkward, fine), problem color of after border needs match background behind element, different depending on different contexts. there way bubble color of background color of after border?

my solution duplicate class known background color variations, seems ugly , inefficient.

i'm using sass, , prefer avoid javascript open solutions.