JSFiddle - React, Tailwind, and code Playground

HTML

<p>Lorem ipsum <em>dolor sit</em> amet,</p>

<p>consectetur <em>adipisicing</em> elit,</p>

<p>sed do eiusmod tempor <em>incididunt ut labore</em> et dolore magna aliqua.</p>

<p>Ut enim ad <em>minim veniam</em>,</p>

CSS

body {
  background-color: #4cd;
  color: #fff;
  font-weight: bold;
}
em {
  font-style: normal;
}

/* 普通のマーカー */
p:nth-of-type(1) em {
  background-color: #ff0;
}
p:nth-of-type(2) em {
  background: linear-gradient(transparent 50%, #ff0 50%);
}

/* 上から塗ったマーカー */
p:nth-of-type(3) em,
p:nth-of-type(4) em {
  position: relative;
  display: inline-block;
}
p:nth-of-type(3) em:after {
  content: "";
  background: rgba(255, 255, 0, 0.5);
  mix-blend-mode: multiply;
  width: 100%;
  height :100%;
  position: absolute;
  left: 0;
}
p:nth-of-type(4) em:after {
  content: "";
  background: linear-gradient(transparent 50%, rgba(255, 255, 0, 0.5) 50%);
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}