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

Question

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

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

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

我怎么能避免这个？

Answer 1

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

如果square的大小:before始终相同,则另外一个解决方案是添加

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