Last active
January 30, 2026 20:14
-
-
Save claudioluciano/1c108c5fe7804d3ff393f27667d84971 to your computer and use it in GitHub Desktop.
Obsidian - snippet to create spoilers on notes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --spoiler-bg-color: rgb(23, 23, 26); | |
| --spoiler-border-radius: 2px; | |
| --spoiler-transition-duration: 0.3s; | |
| --spoiler-transition-timing: ease-in-out; | |
| } | |
| /* Document */ | |
| /* Hide the checkbox */ | |
| [data-task="#"]>label { | |
| display: none; | |
| } | |
| /* Spoiler when the line is not active */ | |
| [data-task="#"]:not(.cm-active)>.cm-list-1::before { | |
| content: ' '; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: var(--spoiler-bg-color); | |
| border-radius: var(--spoiler-border-radius); | |
| transition: opacity var(--spoiler-transition-duration) var(--spoiler-transition-timing); | |
| } | |
| /* Reveal when hovering and the line is not active */ | |
| [data-task="#"]:hover:not(.cm-active)>.cm-list-1::before { | |
| opacity: 0; | |
| } | |
| /* Popover */ | |
| /* Hide the checkbox */ | |
| .popover [data-task="#"]>input[type="checkbox"] { | |
| display: none; | |
| } | |
| /* Remove the margin on the left of the spoiler */ | |
| .popover [data-task="#"] { | |
| margin-inline-start: initial; | |
| } | |
| /* Spoiler the line */ | |
| .popover [data-task="#"]::before { | |
| content: ' '; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: var(--spoiler-bg-color); | |
| border-radius: var(--spoiler-border-radius); | |
| transition: opacity var(--spoiler-transition-duration) var(--spoiler-transition-timing); | |
| } | |
| /* Reveal when hovering */ | |
| .popover [data-task="#"]:hover::before { | |
| opacity: 0; | |
| } |
Author
I had an issue (macOS) where the spoiler blocks were covering the entire line width instead of just the text content.
Fix: Made the spoiler containers inline-block to fit content width and added padding for better right-hand spacing to match the space added by content: ' ':
/* Document */
[data-task="#"] .cm-list-1 {
display: inline-block;
position: relative;
padding-right: 0.1ch;
}
/* Popover */
.popover [data-task="#"] {
margin-inline-start: initial;
display: inline-block;
position: relative;
padding-right: 0.1ch;
}
Currently the checkbox disappears when editing the line and caret is after the - [#] part:
For people who prefer seeing the checkbox as an indication that it's a "spoiler" line, change:
/* Hide the checkbox */
[data-task="#"]>label {
display: none;
}with
/* Hide the checkbox */
[data-task="#"]:not(.cm-active)>label {
display: none;
}It will show a standard checkbox:
Ideally we'd have a dedicated “sharp / spoiler” icon but that's more work.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks man, I'm glad you liked it.