<h1 class="anchor">Miriam Suzanne</h1>
<p class="anchor">is very fond of CSS</p>

.anchor {
  --color: currentcolor;
  --line: 0.06em;
  --terminal: 0.2em;
  --opacity: 0.5;
  
  display: flex;
}

.anchor::before {
  flex: 0.5;
  align-self: center;
  background-image: 
    linear-gradient(to top, 
      var(--color), 
      var(--color)
    ),
    radial-gradient(circle closest-side, 
      var(--color) 90%, 
      transparent 95%
    )
  ;
  background-position: 0 center, 100% center;
  background-size: 
    calc(100% - var(--terminal) / 2) var(--line), 
    var(--terminal) var(--terminal)
  ;
  background-repeat: no-repeat;
  content: '';
  height: calc(var(--terminal) + 4px);
  margin-right: var(--gutter);
  opacity: var(--opacity);
}






html {
  font-size: calc(1.5em + 0.5vw);
  font-family: Merriweather, serif;
  --gutter: 0.75rem;
}

body {
  display: grid;
  align-content: center;
  min-height: 100vh;
}

h1, p { margin: 0; }
h1 { color: darkmagenta; }
p { font-style: italic; }