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;
}