让 H1 文本环绕在 ::before 伪元素旁边

Question

我有一个相当长的 H1 标题，其中包含一个 link 和一个我想正确换行的伪 ::before 元素。这是我需要的：

1. H1 内部 a link 上的伪 ::before 元素（它需要可点击，因此不能在 H1 上）。
   • 我已经成功完成了。
2. 要正常换行并与第一个单词左侧对齐的文本。
   • 这就是问题所在。

在这里查看我的测试代码笔：http://codepen.io/dmoz/pen/EaZqKv

看起来应该是一个简单的修复，但我想不出是什么控制了文本的换行方式。有什么想法吗？

Answer 1

将float:left添加到伪元素即可。

检查更新demo

Answer 2

现在您的图像显示为内联元素（想象它像 'A' 或“9”这样的单个字符一样流动）。要让文本环绕它，您需要它浮动。我不确定这是否强制块级格式化，但它确实强制其他元素

http://codepen.io/anon/pen/MYJNEp

像这样：

.site-title a:before {
    ...
    float:left;
}

编辑： 如果在 h1 之后出现其他元素（很有可能）

，请记住清除浮动