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

我有一个图标：在伪元素之前,如果textelement变长并进入下一行,我希望它不会缠绕我的伪元素但保持它的距离.

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

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

我怎么能避免这个？

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

如果：之前的平方大小始终相同,则另外一个解决方案是添加

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

到CSS.这会导致整个块向右移动,除了包含正方形的第一行,它会“缩进”.

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/

另一种方法,因为目的是制作一个自定义的“子弹”,将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/