Remove Footer (everything after - - -) from note preview/embedded note using custom CSS

[lab]

I have many notes like…

---
aliases: 
tags: [List]
---

# Heading A
Some description 

## Heading AA
Some content

## Heading AB
Some more content

--- 
**Created**:: [[2022-08-15]]
**Context**:: [[Some MOC]]
**Related**:: [[Some notes]]

---

What I want to achieve is to embed the content of those notes but prevent the footer from being displayed in the embedded preview (i.e. everything after the ---).

Unfortunately ![[MyNote]] (as well as ![[MyNote#HeadingA]]) will include the footer in the preview. I know that I could work around by adding a #Footer heading in place of the ---. But I really want to avoid this!

---

Hypothetical CSS4-Solution
I’ve read about the :has-selector of some future CSS-versions. However, as far as I understand, the new selector is only supported by Safari by now. Any idea, whether this will be supported by Electron soon? Because if so, then the following should work, I suppose (i.e. accessing (and hiding) the siblings of the parent of hr):

div:has(hr) ~ div {
    display: none;
}

---

Is there any other way to get rid of my footers? I’ve realised that this issue really keeps me away from embedding notes.

[lab]

Trying to give this some new attention. Workarounds are also warmly welcome.

Btw.: I’m aware that I could put the content of the footer in the frontmatter, avoiding having any footer at all. And actually, I might really do this… However, I wanted to get some second opinion, before I (manually?) do this with 2000 notes…

[lab]

I’ve just found a nice and simple solution.

Instead of using --- as a separator of the footer I now just use a sequence of em-dashes with a leading # to format the separator as H1. This makes embedded previews of the form [[note#heading]] stop at the separator and hide the footer.

Like so:

# ————————————————————
Created:: [[2022-08-15]]
Context:: [[Some MOC]]
Related:: [[Some notes]]

[efemkay]

@lab

div:has(hr) ~ div {
    display: none;
}

hi @lab i know u’ve solved ur own issue, but perhaps i can just add few things (for our future note as well).

as you noted the above css is not yet supported in obsidian currently (we would have to for electron 21 i think, now it’s 17). but even so, there will be limitation as any div after hr tag will be hidden (you would have to be wary of using hr other than for footer).

that said, you can technically do it with Contextual Typography plugin and :is() css per below. the css classes .el-embed-page and .el-hr are introduced by the plugin to bring the sub divs “classes” into the top level container div

/* test footer */
.el-embed-page .el-hr,
.el-embed-page .el-hr ~ div {
    display: none;
}