html -::Before 元素未正确 float 在 float 元素上

Question

有一个基本的html和css如下，

* {
  margin: 0;
  padding: 0
}
.float {
  float: left
}
h1 {
  font-size: 2em
}
h2 {
  font-size: 1em
}
hgroup::before {
  float: left;
  font-size: 3em;
  padding: 0 .1em;
  content: ':)'
}

<hgroup>
  <h1>Hello</h1>
  <h2>World</h2>
</hgroup>
<hr />
<hgroup class="float">
  <h1>Hello</h1>
  <h2>World</h2>
</hgroup>

我希望::before float 到它自己的元素的左侧。

在元素本身也 float 之前，它会很好地工作。发生这种情况时，::before 不再 float 。

有没有办法让它在不添加容器元素的情况下工作？

Answer 1

将这个添加到你的 .float class width: 100%;

* {
  margin: 0;
  padding: 0
}
.float {
  float: left;
  width: 100%;
}
h1 {
  font-size: 2em
}
h2 {
  font-size: 1em
}
hgroup::before {
  float: left;
  font-size: 3em;
  padding: 0 .1em;
  content: ':)'
}

<hgroup>
  <h1>Hello</h1>
  <h2>World</h2>
</hgroup>
<hr />
<hgroup class="float">
  <h1>Hello</h1>
  <h2>World</h2>
</hgroup>