<p>A demo showing how theme colors can be passed to pseudo elements</p>

<em class="theme-primary color emphasis"><span>element with <b class='bg'><span>theme</span></b> applied</span></em>

body {
  display:flex;
  justify-content:center;
  flex-direction:column;
  min-height:100vh;
  max-width:35em;
  margin:0 auto;
  padding:0 1em;
}

.theme-primary.bg, .theme-primary .bg {
  background:rebeccapurple;
}

.theme-primary.color, .theme-primary .color {
  color:rebeccapurple;
}

.emphasis {
 line-height:1; 
}

.emphasis > span {
  color:black;
}

.emphasis::before {
  content:'';
  display:inline-block;
  margin-right:.25em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 .5em 1em .5em;
  border-color: transparent transparent currentColor transparent;
  vertical-align:-12.5%;
  opacity:.8;
}

.emphasis::after {
  content:'';
  display:inline-block;
  height:1em;
  width:1em;
  background:currentColor;
  margin-left:.5em;
  vertical-align:-12.5%;
  opacity:.4;
}

b {
  color:white;
  display:inline-block;
  padding:.25em .5em;
}

b::after {
  display:inline-block;
  content:'';
  height:1em;
  width:1em;
  vertical-align:-20%;
  margin-left:.5em;
  border-radius:50%;
  background:black;
  opacity:.6;
  border:.0625em solid currentColor;
}