Custom CSS: Line under Heading in editor mode

[bhickta]

Things I have tried

• CSS

/** ........ 2.11.3 Heading Horizontal Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/288?u=tallguyjenks */
h1,h2,h3,h4,h5,h6 {
	display: flex;
	width: 100%;
	align-items: center;
}
h1:before, h1:after, 
h2:before, h2:after, 
h3:before, h3:after, 
h4:before, h4:after, 
h5:before, h5:after, 
h6:before, h6:after {
	content: '';
	background: var(--bright-aqua);
	height: .1em;
	margin: .2em;
	flex: 1;
}
h1 > a {
	padding: 0 0.25em!important;
}
h2 > a {
	padding: 0 0.25em!important;
}
h3 > a {
	padding: 0 0.25em!important;
}
h4 > a {
	padding: 0 0.25em!important;
}
h5 > a {
	padding: 0 0.25em!important;
}
h6 > a {
	padding: 0 0.25em!important;
}

.cm-header::after {
  content: '';
  flex: 1;
  margin-left: 1rem;
  height: 1px;
  background-color: #000;
}

• Output
  
  

What I’m trying to do

• Code is working in preview mode but not in editor mode
  
  
• I want this type of display in editor mode too