Component: `Heading Decoration`

[nndda]

Components/tweaks description.

Prototype stylesheet and the HTML structure.

HTML:

<h1 class="custom-heading-deco">foobar</h1>
<h2 class="custom-heading-deco">foobar</h2>
<h3 class="custom-heading-deco">foobar</h3>

<h1 class="custom-heading-divider">foobar</h1>
<h1 class="custom-heading-divider custom-left">foobar</h1>
<h1 class="custom-heading-divider custom-right">foobar</h1>

(S)CSS

:root {
  --heading-deco-img: url("https://cdn.jsdelivr.net/gh/nndda/n@n/div.png");
}
.custom-heading-deco {
  --heading-deco-img-default: url("https://cdn.jsdelivr.net/gh/nndda/n@n/div.png");
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.custom-heading-deco::before,
.custom-heading-deco::after {
  content: var(--heading-deco-img, var(--heading-deco-img-default));
  margin: 0 .5em;
}
.custom-heading-deco::after {
  transform: scaleX(-1);
}




:root {
  --heading-divider-style: dashed; 
  --heading-divider-color: wheat; 
}
.custom-heading-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.custom-heading-divider::before,
.custom-heading-divider::after {
  flex-grow: 1;
  content: "";
  border-bottom: .065em var(--heading-divider-style, solid) var(--heading-divider-color, currentColor);
  margin-inline: .5em;
  height: .065em;
}
.custom-heading-divider.custom-left::before,
.custom-heading-divider.custom-right::after {
  display: none;
}

Screenshots, sketches, or live demo.

Additional notes.