html - 浮动元素旁边的 H2 标记的行为

Question

我对以下内容有一些奇怪的行为：
Html

<article class="feature">
  <div class="feature-media">
    <img src="image.jpg" alt="Article Feature media">
  </div>
  <h2>Secondary Title</h2>
  <p>lorum</p>
</article

CSS

.feature h2:before {
  content: ""  
  float: left;
  display: block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background-color: #df6c4f;
}

.left-main .feature {
  padding: 0 10px;
}

.left-main .feature-media {
  float: left;
  margin-right: 20px;
}

没什么复杂的，只是 H2 标签占据了文章的宽度并忽略了左侧的 div。这意味着我的 :before 元素隐藏在图像后面。我已经浮动了所有 H2 和没有改变任何东西的伪元素。

谢谢

图片： 截图 http://stage.whenthemusicstops.com/screen.png

Answer 1

我创建了一个小提琴，它似乎工作正常（在 Chrome 中测试）。

我注意到的唯一一件事是您在内容后缺少分号：“”，我不得不删除 .left-main 前缀。

.feature h2:before {
    content:"";
    float: left;
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background-color: #df6c4f;
}
.feature {
    padding: 0 10px;
}
.feature-media {
    float: left;
    margin-right: 20px;
}