Question

我在假元素之前有一个图标，如果textelement变得很长并且进入下一行，我希望它不会缠绕我的伪元素但保持它的距离。

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

如果您调整窗口大小以使文本强制进入新行，则可以看到问题。

我该如何避免这种情况？

Answer 1

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

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

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

到CSS。这会导致整个块向右移动，除了包含正方形的第一行，它会缩小＆＃34;缩进＆＃34;。

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

或者我更喜欢的，尺寸为em s，因此红色方块取决于字体大小。

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

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

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

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

另一种方法，因为目的是制作自定义＆＃34; bullet＆＃34;，将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/

Answer 2

您可以添加以下CSS：

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

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>

使文字不包围在图标中：在伪元素之前？

3 个答案: