[css] 剧透文字？

请问有办法在思源笔记里做到剧透文字的效果吗？就像各种论坛上边那样默认是黑块，然后鼠标移上去就能显示的。

文科生，要背的东西太多了，懒得一张张挖空制卡了，想拉通读到哪过到哪。原谅我如果之前有人问过这个问题，但我在百度和论坛上都没搜索到关于剧透文字或者隐藏文字的东西。

借助油管小众视频 + ChatGPT 弄出来下面两坨，丢到外观里去了。但问题是一更新文本块所有样式就清除了，又问了几次 GPT 也改不出来。再过两天考试了实在没工夫继续折腾了，问问佬们怎么解决。

.hidden-text {
    background-color: #111;   
    color: transparent;   
    cursor: pointer;  
    border-radius: 3px;   
    transition: all 0.2s ease;
    white-space: pre-wrap;  
}

.hidden-text:hover {
    background-color: transparent;
    color: #111;          
}

function wrapSelectionWithSpoiler() {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);

    // 获取选中的内容
    const selectedText = range.extractContents();

    // 包裹 span
    const span = document.createElement("span");
    span.className = "hidden-text";
    span.appendChild(selectedText);

    // 插入新的节点
    range.insertNode(span);

    // 清除选区，避免重复包裹
    selection.removeAllRanges();
}
// 快捷键绑定：
// - Windows/Linux = Ctrl+E
// - Mac = Command+Ctrl+E
document.addEventListener("keydown", function (e) {
    const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;

    if (
        (isMac && e.metaKey && e.ctrlKey && e.key.toLowerCase() === "e") || // Mac: Command+Ctrl+E
        (!isMac && e.ctrlKey && e.key.toLowerCase() === "e")               // Win/Linux: Ctrl+E
    ) {
        e.preventDefault();
        wrapSelectionWithSpoiler();
    }
});

效果如下：