<h1>Three types of underlined marker text</h1>
<h2>background property</h2>
<h3>Block element</h3>
<p class="marker_background">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Block element &amp; Vertical writing</h3>
<p class="marker_background vertical-writing">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Inline element</h3>
<p><span class="marker_background">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<h3>Inline element &amp; Vertical writing</h3>
<p class="vertical-writing"><span class="marker_background">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<h2>box-shadow property</h2>
<h3>Block element</h3>
<p class="marker_box-shadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Block element &amp; Vertical writing</h3>
<p class="marker_box-shadow vertical-writing">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Inline element</h3>
<p><span class="marker_box-shadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<h3>Inline element &amp; Vertical writing</h3>
<p class="vertical-writing"><span class="marker_box-shadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<h2>text-decoration property</h2>
<h3>Block element</h3>
<p class="marker_text-decoration">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Block element &amp; Vertical writing</h3>
<p class="marker_text-decoration vertical-writing">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Inline element</h3>
<p><span class="marker_text-decoration">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<h3>Inline element &amp; Vertical writing</h3>
<p class="vertical-writing"><span class="marker_text-decoration">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>

:is([class^="marker_"], [class*=" marker_"]) {
  overflow: auto;
  resize: both;
}
.vertical-writing {
  max-block-size: 100%;
  inline-size: 80dvi;
  margin-block: 0;
  margin-inline: 1em;
  overflow: auto;
  writing-mode: vertical-rl;
}
.marker_background {
  background: linear-gradient(transparent 50%, orange 50%);
}
.marker_box-shadow {
  box-shadow: inset 0 -0.5em orange;
}
.marker_text-decoration {
  text-decoration: underline;
  text-decoration-color: orange;
  text-decoration-thickness: 0.5em;
  text-decoration-skip-ink: none;
  text-underline-offset: -0.25em;
  text-underline-position: left;
}