HELP! add ::before pseudo-element for callout, it shows weired in ![[embed file]]

[yabao310]

my callout css:

.callout[data-callout="important"]::before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 0.5rem;
    background: #7852ee;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}


.callout[data-callout="important"] {
    --callout-color: var(--callout-example);
    --callout-icon: lucide-atom;
}

it shows normal in my note:

but it shows weired in ![[link]]:

[ariehen]

Using a ::before there does indeed have unexpected results with the callout in an embed. FWIW, I haven’t seen ::before placed on the root .callout element before.

This seems to produce similar results and looks fine in an embed. You could give it a try.

.callout[data-callout="important"] {
    --callout-color: var(--callout-example);
    --callout-icon: lucide-atom;
    border-left: 6px solid #7852ee;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

I noticed the callout-in-an-embed internal margin issue. You could use the CSS here to fix it if it bothers you:

Embedding a Callout removes space below Callout title

I took screenshots and wrote this up before finding this report, so might as well post it: Steps to reproduce In the Sandbox, create noteA with this content: Clap of thunder rope's end red ensign Barbary Coast broadside ye Plate Fleet. > [!example] Title > Pirates of the Obsidian! Careen loot driver scurvy maroon take a caulk barque topgallant squiffy. Create noteB with this content: Chase guns strike colors fluke barque Sea Legs boom maroon code of sutler gun. ![[noteA]] Piracy fire i…

Also, if you have two callouts next to each other and they are smooshed together in a Live Preview embed (right tab from my screenshot), this will sort that out:

:root div:not(.cm-callout) > div > .callout {
    margin: 1em 0;
}

[yabao310]

Thank you!
This is really helpful!