CSS text-emphasis-position Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* General styling for visibility */
body {
  font-family: sans-serif;
  line-height: 3; /* Extra spacing to see the marks clearly */
  padding: 20px;
}

/* Base emphasis style */
p {
  text-emphasis-style: circle;
  text-emphasis-color: #e63946;
}

/* Positioning examples */
.over {
  text-emphasis-position: over right;
}

.under {
  text-emphasis-position: under right;
}

/* Applying only to a specific span */
.combined span {
  text-emphasis-style: '★';
  text-emphasis-position: under left;
  text-emphasis-color: #457b9d;
}</style></head><body><div class="container">
  <p class="over">This text has marks <strong>above</strong> (over).</p>
  
  <p class="under">This text has marks <strong>below</strong> (under).</p>
  
  <p class="combined">This is a <span>special</span> emphasis.</p>
</div></body></html>