I’m currently exploring ways to make a Unicode emoji () function as an internal link to a specific header within the same note in Obsidian. While I’ve tested a few approaches, none seem to work consistently across both Editing View and Reading View.
Here’s what I’ve tried so far:
Wikilinks:➡️ [[#Target Header]]
Works in Reading View, but in Editing View, only a small portion of the link is clickable.
Markdown Links:[➡️](#target-header)
Doesn’t seem to work in either view.
Unicode Space Trick:[➡️ ](#target-header) (non-breaking space)
No success with this approach either.
I’d appreciate any insights into the best way to achieve a fully clickable emoji link, ensuring functionality in both Editing and Reading modes. Thanks in advance for your guidance!
Thank you, @holroy! I really appreciate your suggestion.
I did try using [[#target-header|➡️]], and while it works in Reading View, in Editing View, only a small, barely clickable area of the link remains active. That’s why I ended up exploring a CSS-based solution to make the entire emoji clickable while hiding the link text completely.
Final Solution: Custom CSS Snippet
For those facing the same issue, adding the following CSS snippet ensures that only the emoji is visible and fully clickable in both Editing View and Reading View:
/* Hide link text and show only the emoji */
.cm-underline {
font-size: 0; /* Hide the text */
display: inline-flex;
align-items: center;
text-decoration: none;
padding: 2px 4px;
border-radius: 4px;
}
/* Add the emoji as the only visible element */
.cm-underline::before {
content: "➡️"; /* Change to any emoji you prefer */
font-size: 16px;
display: inline-block;
}
/* Ensure the emoji is fully clickable */
.cm-underline:hover {
background-color: rgba(200, 200, 200, 0.2);
cursor: pointer;
}
This approach ensures a cleaner and more user-friendly experience. Hope this helps others!
What do you mean that “only a small, barely clickable area of the link” remains active? The entire icon can be clicked on in both live preview and reading mode in my world? Do you do something else, or do some of your theme change the default behavior?
It could be you should rather locate the culprit causing it to be small and barely clickable, than introduce even more magic to make it clickable again…
) function as an internal link to a specific header within the same note in Obsidian. While I’ve tested a few approaches, none seem to work consistently across both Editing View and Reading View.
Final Solution: Custom CSS Snippet