css - 使文本不环绕在 :before pseudoelement? 中的图标

Question

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

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

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

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

Answer 1

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

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

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

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

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

或者我更喜欢，大小以 em 为单位，以便红色方 block 取决于字体大小。

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