添加与最后一个单词分隔的链接图标？

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。添加white-space: nowrap处理Firefox上的问题;这是不合逻辑的，因为根据定义它只能防止伪元素内的换行，问题是正常内容和伪元素之间的换行 - 无论如何，因为它有帮助，让我们在这里使用它。

更常见的方法是将图标添加为放置在右侧的a元素的背景图像。这可以避免断线问题。