html - 使用 :after pseudo-elements 重复图像

Question

我想像这样在我的网站上放置标题:http://cl.ly/0m3F0j392e0G1n0s0T34 我最想做的是使用文本作为标题，然后在其后水平重复一个 10px x 10px 的 gif。

编辑:我应该补充一点，我想使用带纹理的背景，这样我就不能为 h2 元素设置任何纯色。

我已经能够在标题后添加 gif，但我无法让它重复，即使我添加了 repeat-x。这是我使用的代码:

h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}

这个或任何替代方法是否有任何变通方法？我宁愿不求助于将整个标题切片为图像。我考虑过将标题 float 到左侧，然后将一个空的 div float 到右侧，并将 gif 作为重复背景图像，但我认为这就是 :after 伪元素的用途，对吧？

Answer 1

有点hacky，会涉及到添加overflow-x:hidden;到父元素，但应该可以解决这个问题:

h2 {
    position: relative;
    padding-right: 10px;
    float: left;
    }
h2::after {
    content: '';
    position: absolute;
    left: 100%;
    right: 9999px;
    background: url(image.gif);
    height: 10px;
    width: 9999px;
    }