link:在文本换行之后,伪元素不可单击之前

时间:2014-05-08 00:27:47

标签: css pseudo-element

我在链接前插入一个箭头,表示点击会展开该部分。箭头是图标字体的一部分,并使用:before。这个链接本身就是第一个' li'一系列浮动的系列(点击它会显示一个隐藏的容器 - 它不会对列表产生任何影响)基本结构如下:

<ul>
    <li> <!--Floats left -->
        <a href="link.com" class='prepend-arrow'>Link text</a>
    </li>
    <li> <!--Floats left -->
        Some text
    </li>
    <li> <!--Floats left -->
        Some more text
    </li>
    ...
</ul>

&#39; prepend-arrow&#39;基本上是:

.prepend-arrow:before {
    font-family: 'myIconFont'
    content: '}'
}

通常情况下,这个项目列表会在没有包装的情况下放入容器中,您可以单击“链接”文本&#39;以及它之前的箭头来触发链接。但是,当文本本地化时,有时会导致某些列表项换行到第二行。 发生这种情况时,链接会正常运行,但前面的箭头不再可以点击。

不可否认,这是一个非常小的问题(即使在我们的测试人员的脑海中),我可以依靠在链接中插入带有背景图像的跨度但是如果有任何方法可以修复&#39 ;碎&#39;当列表已经包装到多行而没有添加更多标记时,伪元素的链接行为,我很乐意听到它。

谢谢!

0 个答案:

没有答案