css - 添加与最后一个单词断开的链接图标？

Question

是否可以在与最后一个单词断开的链接之后添加一个图标？

:after并且content都在 Chrome 中中断。

测试：http: //jsfiddle.net/V32Wd/1/

Answer 1

对于标记<a class="after" href="#">The icon should not break alone</a>，请使用以下 CSS 代码：

a.after:after {
    content: '\feff' url('...');
    padding-left: 4px;
    white-space: nowrap;
}

添加'\feff'意味着添加了U+FEFF ZERO WIDTH NO-BREAK SPACE，一个不可见的控制字符，防止前后换行。这对 Chrome 和 IE 有帮助，但对 Firefox 没有帮助。在 Firefox 上添加white-space: nowrap处理该问题的交易；这是不合逻辑的，因为根据定义，它只防止伪元素内部的换行，问题是正常内容和伪元素之间的换行——无论如何，因为它有帮助，让我们在这里使用它。

更常见的方法是添加一个图标作为a元素的背景图像，放置在右侧。这避免了换行问题。