<h1>test</h1>
<style>
/* credits to EstrellaYoshite for the heading + theme ref */
:root {
--heading-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'%3E%3Cpath d='M1 6a5 5 0 0 0 5-5 5 5 0 0 0 5 5 5 5 0 0 0-5 5 5 5 0 0 0-5-5z' style='fill:none;stroke:%23000;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none'/%3E%3C/svg%3E");
} /* yes you'll need a heading mask for this, which is the sparkle seen next to the name */
h1 {
display: flex;
align-items: center;
column-gap: 0.325rem;
color: #000;
font-family: 'Arial', sans-serif;
font-weight: bold;
font-size: 2.675em;
line-height: 1;
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0.425em;
}
:is(h1)::before,
:is(h1)::after {
content: "";
display: block;
height: 0.1rem;
min-width: 2.5rem;
flex-grow: 1;
background: currentColor;
order: 1;
}
:is(h1)::before {
flex-grow: 0;
width: 1.75rem;
min-width: 1.75rem;
height: 1.75rem;
-webkit-mask-image: var(--heading-mask);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
mask-image: var(--heading-mask);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
</style>
