Add the `#` symbol to style a headline in CSS

Help
1

This is my custom style for CSS headlines:

body {
    --h1-size: 1.50em;
    --h2-size: 1.40em;
    --h3-size: 1.30em;
    --h4-size: 1.20em;
    --h5-size: 1.10em;
    --h6-size: 1em;
}

h1::before {
    content: "# ";
    opacity: 0.5;
}

h2::before {
    content: "## ";
    opacity: 0.5;
}

h3::before {
    content: "### ";
    opacity: 0.5;
}

h4::before {
    content: "#### ";
    opacity: 0.5;
}

h5::before {
    content: "##### ";
    opacity: 0.5;
}

h6::before {
    content: "###### ";
    opacity: 0.5;
}

The second part, h1::before, is not working. How can I add “#” to “#######” before the headline in the display view in Obsidian? I’ve noticed that several templates add custom colors, etc. How can I do that?

3

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