css - 使用 :after without content and width limitation

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，但是如果没有给你特定宽度的文本/图像内容，你就无法使用它。我的图像只有 3px 宽度，因此它会显示一次，然后就可以了。我该怎么做才能显示图像直到 ul 宽度结束(当然使用 a:after)？

Answer 1

就可用性而言，固定宽度的链接列表(右侧有重复的图案填充)应该在该行元素的整个宽度(包括图案填充)内可单击。然而，由于您似乎非常固执地使用 :after，那么这个 Fiddle 怎么样？ ？

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

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