css - 如何避免CSS中“：之前”之后的换行符

Question

在我的网站上，我对某些链接类型使用字体图标。这些图标是通过:beforeCSS 语法添加的。

a.some-link:before {
  font-family: icons;
  display: inline-block;
  padding-right: 0.3em;
  content: 'x';
}

但是，当此链接位于行首时，它有时会与其图标分开：

与链接分离的图标

我尝试添加white-space: nowrap到上面的 CSS 规则，但这没有帮助。

如何将图标和文本保持在一起？（CSS 3 没问题）

注意：我不想用white-space: nowrap.

score 10 · Accepted Answer

只需删除display:inline-block;似乎可以解决此问题：

a.some-link:before {
    font-family: icons;
    padding-right: 0.3em;
    content: 'x';
}

JSF中。

不幸的是，您需要“显示：内联块”来显示 SVG。简单的解决方案是将“display：inline-block”放在“a”上。这将导致您的 SVG 正确渲染，并将 a:before 和 a 保持在同一行。

score 4 · Accepted Answer

向css添加nowrap规则要好得多：:before

white-space: nowrap;

规则的原因nowrap是在:before. 文本内容不需要这条规则来靠近主要元素。

score 0 · Accepted Answer

避免在锚点和 :before 之间缠绕的最佳解决方案是：

a.some-link {
    display: inline-block;
}
a.some-link::before {
    content: 'x';
}

奖金！为了避免在悬停时为 :before 加下划线：

a.some-link::before {
    display: inline-block;
}

3 回答 3