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

Question

我在一个:before伪元素中放置了一个图标，如果文本元素变得过长并换行到下一行，我希望它不要绕过我的伪元素而保持距离。

这是我的示例链接: http://jsbin.com/yosevagaqa/1/edit?html,css,output 如果调整窗口大小以使文本强制换行到新行，则可以看到问题。

我该如何避免这种情况？

- Johan Dahl

---

如果 :before 中的正方形大小始终相同，则一种解决方案是将 .link {margin-left:25px; text-indent:-25px;} 添加到 CSS 中。http://jsbin.com/meluhapeje/1/edit?html，css，输出 - Mr Lister

这是一个不错的解决方案，谢谢！ - Johan Dahl

好的，我已经写成了一个答案，并提供了一些其他可选方案。 - Mr Lister

Answer 1

从其他答案中可以看出，有多种解决方案！

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

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

将CSS中的text-indent属性设置为正值会导致整个块向右移动，除了包含方块的第一行，该行被"取消缩进"。

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

或者我更喜欢使用em单位来设置大小，这样红色方块就会根据字体大小变化。

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

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

当然，要确保缩进与正方形的大小加上边距相同。

另一种方法，既然目的是制作自定义“项目符号”，就可以将

视为列表项。然后您就不需要使用::before技巧。不过，您仍需要其他技巧来使正方形大小合适... http://jsfiddle.net/MrLister/3xbfyqkh/1/

.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/

- Mr Lister

---

谢谢，回答得非常好！ - Johan Dahl

Answer 2

您可以添加以下CSS代码：

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

- Vineeta Mehta

Answer 3

.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>

- Dmitriy