<h2><code>filled</code></h2>
<h2><code>open</code></h2>
<h2><code>dot</code></h2>
<h2><code>circle</code></h2>
<h2><code>double-circle</code></h2>
<h2><code>triangle</code></h2>
<h2><code>sesame</code></h2>
<h2><code>none</code></h2>
<h2><code>string</code></h2>

body {
  background: #ff7a18;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
  margin: auto;
  max-width: clamp(300px, 75%, 700px);
}

h2 {
  align-items: center;
  background: #fff;
  border: 1px solid #dd2c00;
  display: flex;
  font-size: 95%;
  height: 150px;
  justify-content: center;
  width: 150px;
}

h2:nth-child(1) {
  text-emphasis: filled;
}
h2:nth-child(2) {
  text-emphasis: open;
}
h2:nth-child(3) {
  text-emphasis: dot;
}
h2:nth-child(4) {
  text-emphasis: circle;
}
h2:nth-child(5) {
  text-emphasis: double-circle;
}
h2:nth-child(6) {
  text-emphasis: triangle;
}
h2:nth-child(7) {
  text-emphasis: sesame;
}
h2:nth-child(8) {
  text-emphasis: none;
}
h2:nth-child(9) {
  text-emphasis: "*";
}