使用：没有内容和宽度限制后

Question

这是我的代码：

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link 2</a></li>
</ul>

菜单是垂直的，ul具有特定的宽度。

接下来我想做的是：

------ ul width 300px ------
[link][image repeat........]
[link 2][image repeat .....]

• 图片repeat-x ul宽度和repeat-y文字高度

我尝试使用a:after，但如果没有为您提供特定宽度的文字/图片内容，则无法使用它。我的图像只有3像素宽，所以它显示它一次而且它。如何在ul宽度结束前显示图像（当然使用a:after）？

Answer 1

可用性方面，固定宽度的链接列表（在右侧重复填充图案）应该可以在该行项目的整个宽度上单击，包括图案填充。但是，由于您在使用:after时看起来非常任性，这个Fiddle怎么样？

您必须在content属性中添加一个字符，以便有一些背景。不幸的是，由于某种原因，我无法使content: '\0020';（编码空间）工作，所以我使用了非常温和的东西，然后用rgba(0,0,0,0)将颜色设置为透明。并非所有浏览器都支持rgba，但有一些资源可以解决这个问题。如果不使用该路径，则可能只需将管道（|）字符（因为与图案化图像的左边缘对齐）设置为图案的主色。就我而言，我可以将其设置为图像中的深灰色。

无论如何，这应该足以解决您的问题。如果没有，请告诉我。

Answer 2

content: "\00a0";强制在:after中显示您的CSS样式： - ）