Add symbol to long header

[AdrianoCzelentano]

How to align symbol to first line of long (multiple line) header?

I’ve created CSS, that add symbol to header.
Bottom of symbol is aligned to bottom of header (bottom of A letter).
It works with 1 line header but goes away with multiple lines.

My code for edit view:

.cm-line.HyperMD-header-1::before {
  content: "⚀";
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0.8;
  pointer-events: none;
  color: var(--text-muted);
  font-weight: 500;
  text-indent: -0.8em;
}

The same behavior on PC and Android.

[dawni]

It’s because the content is at bottom: 0.

Delete the bottom line. If you like that placement, then all done.

If you don’t like that placement, then you could add top and try to tweak it, but I suspect it also won’t be consistent. Might be better to place the symbol with an element that’s already always aligned, such as the fold indicator. So something like:

.cm-line.HyperMD-header-1 > .cm-fold-indicator::after {
  content: "⚀";
  position: absolute;
  left: 0;
  top: 2px;
  opacity: 0.8;
  color: var(--text-muted);
  font-weight: 500;
  text-indent: -0.8em;
}

Adjust top to suit your font.

[AdrianoCzelentano]

Great idea!
I’ve aligned symbols with fold indicators with small modification of your code.

.cm-line.HyperMD-header-1 > .cm-fold-indicator::after,
.cm-line.HyperMD-header-2 > .cm-fold-indicator::after,
.cm-line.HyperMD-header-3 > .cm-fold-indicator::after,
.cm-line.HyperMD-header-4 > .cm-fold-indicator::after,
.cm-line.HyperMD-header-5 > .cm-fold-indicator::after,
.cm-line.HyperMD-header-6 > .cm-fold-indicator::after {
  content: "⚀";
  position: absolute;
  left: -1.45ch; /*adjust horizontal placement; visually almost constant value*/
  line-height: inherit; /*baseline consistency*/
  opacity: 0.8;
  color: var(--text-muted);
  font-weight: 500;
  transform: translateY(+5%); /*just for tune vertical position*/
}

[AdrianoCzelentano]

The main drawback of this approach is that the symbol disappears when there is no text underneath it, so there is no fold indicator.

[AdrianoCzelentano]

Now Symbol remain, even without text and fold indicator.
(It similar to fist solution)

.cm-line.HyperMD-header-1::before { /* <-- change */
  content: "⚀"
  position: absolute;
  left: -1.45ch; /*adjust horizontal placement; visually almost constant value*/
  line-height: inherit; /*baseline consistency*/
  opacity: 0.8;
  color: var(--text-muted);
  font-weight: 500;
  transform: translateY(+5%); /*just for tune vertical position*/
}