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

您需要将“阅读更多”设置为position:relative，然后添加position:absolute到您的:beforeand:after元素，指定top:and left:/right:位置以使其在您想要的位置排列。您还需要在文本左侧添加一些填充。