我不知道该怎么做。
我想做的是在 Uncategorized 和 82,359 之间打印点,或者至少是幻觉,我想我必须做一些带有虚线边框的事情
<ul class="list">
<li>
<a href="#">
<span class="count">82,359</span>
Uncategorized
</a>
</li>
</ul>
CSS
.list a {
display: block;
padding: 6px 10px;
}
.list .count {
font-weight: normal;
float: right;
color: #6b7a8c;
}
我想要的是:
我试过,我能想到的唯一方法是 <div style="border-bottom: 1px dotted #CCC;"></div>
在 .count 和 Uncategorized 之间,但在两者之上添加边框
最佳答案
基于此处使用的示例:Dot Leaders正如 Black Hat Samurai 所引用的那样,对链接中的标记和 CSS 进行轻微更改有助于它。
添加注释以解释代码的工作原理。
ul.list {
max-width: 220px; /* Set the width for the whole list */
list-style: none;
padding: 0;
}
ul.list li:before {
float: left; /* Let the before pseudo element start from the leftmost position of each list item */
width: 0;
white-space: nowrap;
content: ".....................................................";
color: #ccc;
font-weight: bold;
}
ul.list span:first-child {
background: white;
padding-right: 0.2em;
}
ul.list span + span {
float: right; /* Align the count to the rightmost position of the list */
background: white;
padding-left: 0.2em;
}
<ul class="list">
<li>
<a href="#">
<span class="title">Uncategorized</span>
<span class="count">82,359</span>
</a>
</li>
</ul>
关于css - 从左到右的虚线边框(两个元素之间),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31481386/