Headers CSS Snippet

Custom CSS & Theme Design
1

I’m trying to create a CSS snippet that marks each of my headers (H1-H6). For some reason, the code’s not working. My code is below, please tell me what I’m doing wrong.

h1::before {
  content: "H1" !important;
  font-size: 7pt !important;
  vertical-align: middle !important;
  display: inline !important;
}

h2::before {
  content: "H2" !important;
  font-size: 7pt !important;
  vertical-align: middle !important;
  display: inline !important;
}

h3::before {
  content: "H3" !important;
  font-size: 7pt !important;
  vertical-align: middle !important;
  display: inline !important;
}

h4::before {
  content: "H4" !important;
  font-size: 7pt !important;
  vertical-align: middle !important;
  display: inline !important;
}

h5::before {
  content: "H5" !important;
  font-size: 7pt !important;
  vertical-align: middle !important;
  display: inline !important;
}

h6::before {
  content: "H6" !important;
  font-size: 7pt !important;
  vertical-align: middle !important;
  display: inline !important;
}
2

I copied your code into my P:\Obsidian.obsidian\snippets\headers.css and it works. Perhaps this is the problem:

image
image1029×210 12.9 KB

Have you activated your code snippet?

4

Yes, I did. It didn’t do anything.

5

Are you by any chance using Live Preview? If yes you can use this instead:

	.HyperMD-header-1.cm-line::before {
		content: "H1 ";
	}

And so on…

6

That did it, thank you! :grin:

7

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.