What I’m trying to do
In my vault I have separate notes for quotes. I’ve been embedding these quotes in other notes using basic file embedding, e.g. ![[Lincoln quote on sharpening the ax]] where the embedded file contains no uncommented text aside from the quote itself. However certain aspects of how this is formatted aren’t perfect and I’d like to achieve a similar functionality using quote callouts.
Currently I’m experimenting with adding a text property called “quote” to the quote note which reproduces the quote. Then I can use formatting like this to print the quote inside the callout using an inline dataview query:
> [!quote]
> `= [[Lincoln quote on sharpening the ax]].quote`
However, one nice feature that the embedded note method has which this callout method lacks is that it includes an embedded link to the source quote note. This appears as a chain icon at the upper right of the embedded note which, if clicked, will open the quote note.
What I’m trying to figure out is if I can use a CSS snippet to add that same “embedded link icon” functionality to the quote callout. Major bonus points if the CSS snippet can handle all this in such a way that I only have to enter the quote note link in one place and it automatically handles extracting the quote property and embedded link from that provided link.
Things I have tried
I’ve searched the web and this forum to see if this sort of thing has been addressed elsewhere. I’ve also use the developer tool in Obsidian to track down the link icon in the embedded note to the CSS below, though I’m not sure how to use this to accomplish what I’m trying to do.
.markdown-embed-link, .file-embed-link {
position: absolute;
top: 4px;
right: 4px;
color: var(--icon-color);
opacity: var(--icon-opacity);
cursor: var(--cursor-link);
padding: var(--size-2-2);
border-radius: var(--radius-s);
display: flex;
align-items: center;
--icon-size: var(--icon-s);
--icon-stroke: var(--icon-s-stroke-width);
}