html - 在 CSS 格式的链接中使用 :before 时避免换行

Question

我使用 :before 在 CSS 中将图像添加到我网站上的某些链接

a.ext:before {
    content:            url(./_img/ext.png);
}

不幸的是，如果空间不大，图像和文本是分开的。

对比

如果图像绑定到链接中的第一个单词（在 HTML 中我会使用 它），那就太好了。CSS中有类似的可能吗？

编辑：

Answer 1

尝试这个：

a.ext {
    padding-left: 15px;
    position: relative;
    white-space: nowrap; /* use this if you don't want the text to wrap */
}
a.ext:before {
    content: " ";
    background: url("https://www.azdes.gov/uploadedImages/icon_external_link.png") center center no-repeat transparent;
    display: block;
    width: 15px;
    height: 1.2em;
    left: 0;
    top: 0;
    position: absolute;
}

截屏

在 Chrome 24 和 Firefox 18.0.2 中截取的屏幕截图。在 IE 7、8、9 中需要更多内容？:P

小提琴：http: //jsfiddle.net/praveenscience/TXPJE/1/

Answer 2

如果我理解您的问题，如果元素不够宽以容纳它们，您会尝试不让图像包裹在文本下。

溢出和空白的组合：nowrap 可能会得到您正在寻找的结果。