Add horizontal line next to heading

Custom CSS & Theme Design
1

Problem

How to add horizontal line next to long (multiple line) header?

Add horizontal line next to heading-my result
Add horizontal line next to heading-my result739×512 15.3 KB

I’ve created CSS, that add horizontal line next to header.

  • It works well with 1-line header
  • It create new line when editing header
  • It doesn’t works with long (multi-line header)

My code for Edit view:

/* Edit view */
.cm-line.HyperMD-header-1 .cm-header-1 {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 0ch);  /* stretch to line end  */
}

.cm-line.HyperMD-header-1 .cm-header-1::after {
    content: '';
    flex: 1;
    height: 2px;
    background-color: currentColor;
    opacity: 0.25;
    border-radius: 1px;
}

Related