<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; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.