Meta Post - Common CSS Hacks

Share & showcase
246

@ramana: I don’t what code you got, but could this be what you need?

/* Long bullet list: connect the same levels of bullets with vertical "lines" */
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}

.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}

ul ul::before { left: -11px; top: 0; bottom: 0; /* change "left:" value for align of vert. line */
}

/* Edit mode unordered list dash rendered as dot for WYSIWYG */
/* I prefer "Turn -lists into bullets as you type as per Typora */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
    color: transparent;
    max-width: 10px;
}
  
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
    content: "•";
    position: absolute;
    top: 6px;
    left: 4px;
    color: var(--text-normal);
}

I have a file with many useful snippets: you can download it here.

2 Likes