TA貢獻1820條經驗 獲得超9個贊
以@Nico O的答案為基礎，不需要非語義.dots元素。
.toc li {
display: flex;
}
.toc li .title {
order: 1;
}
.toc li .chapter {
order: 3;
}
.toc li::after {
content: "";
border-bottom: 1px dotted;
flex-grow: 1;
order: 2;
}
<ul class="toc">
<li>
<span class="title">Foo</span>
<span class="chapter">Chapter 1</span>
</li>
<li>
<span class="title">Bar</span>
<span class="chapter">Chapter 2</span>
</li>
</ul>
我們利用這樣的事實，即我們可以根據需要對flex容器的子項進行排序，以及偽元素的行為類似于定義它的子項。關鍵是flex-grow規則。一flex-grow的1，而所有其他的兄弟姐妹都默認0將增長到即使它沒有任何內容的剩余空間。
這將一直有效，直到.title和.chapter元素一起填滿所有空間。然后，::after偽元素將具有widthof，0并且即使邊框.title和.chapter將包裝其內容，虛線邊框也不會顯示。因此，如果您確定不會發生這種情況，并且您的觀眾使用的是現代瀏覽器，那么這可能是最佳的解決方案。
如果您想要更稀疏的點，則可以在偽元素上使用徑向漸變作為背景，而不是使用border-bottom：
.toc li::after {
background-image: radial-gradient(circle, currentcolor 1px, transparent 1px);
background-position-y: bottom;
background-size: 1ex 3px;
background-repeat: repeat-x;
height: 1em;
}
舉報