css中的点,在CSS中创建前导点

元芳怎么了

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

我们利用这样的事实，即我们可以根据需要对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;}