将H1文本包含在:: before伪元素旁边

时间:2015-01-12 19:28:18

标签: css pseudo-element textwrapping

我有一个相当长的H1标题,其中包含一个带有伪::before元素的链接,我想要正确地将它包装成两行。这就是我需要的:

  1. H1内::before链接上的伪a元素(它需要是可点击的,因此不能在H1上)。
    • 我成功完成了这项工作。
  2. 要正常换行并与第一个单词的左侧对齐的文本。
    • 这就是问题所在。
  3. 请在此处查看我的测试代码:http://codepen.io/dmoz/pen/EaZqKv

    似乎它应该是一个简单的解决方案,但我无法想象控制文本如何包装的内容。有什么想法吗?

2 个答案:

答案 0 :(得分:3)

float:left添加到伪元素就可以了。

检查更新的demo

答案 1 :(得分:1)

现在你的图像被显示为内联元素(想象它像单个字符一样流动,如'A'或'9')。要让文本环绕它,你需要它浮动。我不确定这是否强制阻止级别格式化,但它确实强制其他元素

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

像这样:

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

修改:如果您的h1(极有可能)

之后出现其他元素,请记得清除浮动广告