Index:Sandbox.djvu/styles.css

/* https://markentier.tech/posts/2021/03/responsive-toc-leader-lines-with-css/ */

.__dot-leader-test1, .__dot-leader-test2 { width: 100%; }

.__dot-leader-test1 td:nth-child(1), .__dot-leader-test2 td:nth-child(1) { width: 0%; text-align: right; padding-right: 0.25em; }

.__dot-leader-test1 td:nth-child(2), .__dot-leader-test2 td:nth-child(2) { overflow: hidden; position: relative; }

.__dot-leader-test1 td:nth-child(2)::after { position: absolute; padding-left: 1em; word-spacing: 2em; content: "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ."; text-align: right; text-indent: 0; }

.__dot-leader-test1 tr:nth-child(7) td:nth-child(2) { padding-left: 4em; text-indent: -2em; }

.__dot-leader-test1 td:nth-child(3) { text-align: right; padding-left: 0.25em; width: 2em; position: relative; }

.__dot-leader-test2 td:nth-child(2)::after { position: absolute; padding-left: 0.25em; padding-right: 0; word-spacing: 2em; content: "... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ."; text-align: right; text-indent: 0; }

.__dot-leader-test2 tr:nth-child(2n) td:nth-child(2)::after { padding-right: 1.5em; }

.__dot-leader-test2 td:nth-child(3) { text-align: right; padding-left: 0.25em; width: 2em; position: relative; }

.__list-test1 { list-style: none; counter-reset: list-test1-counter; } .__list-test1 li { counter-increment: list-test1-counter; } .__list-test1 li::before { content: counter(list-test1-counter);

/* Style away! */

}