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，但有一些资源可以解决这个问题。如果您不使用该路线，您可能只需将管道 (|) 字符(因为它与图案图像的左边缘对齐)设置为图案的主要颜色。就我而言，我可以将其设置为图像中的深灰色。

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