在 :before 伪元素中使文本不环绕图标？

Question

我在 :before 伪元素中有一个图标，如果文本元素变得太长并转到下一行，我希望它不要环绕我的伪元素，而是保持距离。

下面是我的示例 link： http://jsbin.com/yosevagaqa/1/edit?html,css,output

如果您调整 window 的大小以使文本强制换行，您就会看到问题所在。

我怎样才能避免这种情况？

Answer 1

您可以添加以下内容CSS：

.link{
  float: right;
  width: calc(100% - 25px);
}

Answer 2

.link{
  position: relative;
  padding-left: 25px;
}
.link:before {
  content: "";
  background: red;
  background-size: contain;
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  position: absolute; top: 0; left: 0;
}

<h5 class="link"><a href="#">A long link that might wrap and then it gets all weird and stuff</a></h5>

Answer 3

从其他答案可以看出，有多种解法！

如果 :before 中的正方形大小始终相同，另一种解决方案是添加

.link {margin-left:25px; text-indent:-25px;}

到CSS。这导致整个块向右移动，除了第一行，包含正方形，它得到 "outdented".

http://jsfiddle.net/MrLister/3xbfyqkh/

或者我更喜欢什么，大小在 ems 以内，因此红色方块取决于字体大小。

.link:before {
  /* .. */
  width: 1em; height: 1em;
  margin-right: .5em;
}

.link {margin-left:1.5em; text-indent:-1.5em;}

当然，要确保缩进等于大小 + 正方形的边距。

http://jsfiddle.net/MrLister/3xbfyqkh/1/

另一种方法，因为目的是自定义 "bullet"，所以将 h5 视为列表项。那么你就不需要 ::before 把戏了。不过，您将需要其他技巧来使正方形大小合适...

.link {
    display:list-item; list-style:square;
    color:red;
    font-size:2em; line-height:.5em;
    margin:.5em 0 .5em 1em}

.link a {
    font-size:.417em; vertical-align:.3em}

http://jsfiddle.net/MrLister/3xbfyqkh/5/

在 :before 伪元素中使文本不环绕图标？

Make text not wrap around icon in :before pseudoelement?

css

css-selectors

icons

pseudo-element