在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/

Answer 4

由于您正在使用句点，因此它们自然会出现在句号出现的地方。一个选项（很多）可能是使用子弹符号•，但它的重量肯定比一个时期更重。

Answer 5

您需要将“read-more”设置为position:relative，然后将position:absolute添加到:before和:after元素，并指定top:和left: / right:个职位可以将其排列在您想要的位置。您还需要在文本的左侧添加一些填充。