在CSS中创建前导点和跟随点

Question

我尝试在CSS中创建以下效果：

​

​

下面是我所做的：

<a class="read-more" href="#"><span>SEE MORE</span></a>

对于CSS：

.read-more{
    display: inline-block;
}

.read-more span:before{
    content: '...';
    width: 20px;
}
.read-more span:after{
   content: '..................';
   width: 60px;
}

但是，显示的点与链接的底部对齐。有没有人能提供更好的解决方案，或者知道如何把这些点放在链接的中间？

Answer 1

改用\b7，它是middot的代码

.read-more{
    display: inline-block;
}

.read-more span:before{
    content: '\b7\b7\b7';
    width: 20px;
}
.read-more span:after{
   content: '\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7';
   width: 60px;
}

Answer 2

或者你可以给链接添加一个虚线背景，然后在跨度上用红色背景遮罩它……简单有效(只要背景是实心的)

Answer 3

如果您希望元素具有固定的宽度，则可以使用虚线边框来实现此效果。

<div style="padding-left:50px; border-top: 1px dotted black; width:125px;">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>

显然，调整padding-left和width以适应您的布局需要。

在这里查看它的实际效果：http://jsfiddle.net/LDFQs/1/