css - :before gets placed above (instead of to the left) when element contains block elements

Question

我有一个伪元素，我想将其放在相关元素 (.alpha) 的左侧。

但是当该元素包含 block 元素 (.beta) 时，伪元素将置于所有元素之上。

是否有解决此问题的方法，或者是否不可能在具有伪元素的元素中包含 block 元素？

这是一个 live example .

<div class='alpha'>
  <div class='beta'>paragraph text</div>
</div>

.alpha:before {
    content: "this is ";
    font-weight: bold;
    font-style: italic;
}

Answer 1

方法#01:

在您的代码中为 .beta 类使用 inline 元素，例如 span、em 等。

.alpha:before {
    content: "this is ";
    font-weight: bold;
    font-style: italic;
}

<div class='alpha'>
  <span class='beta'>paragraph text</span>
</div>

方法#02:

在你的伪元素上添加 float: left 和一些 margin-right 并且如果你有 inline 和 的混合设置它的布局>block 元素在父元素中。

.alpha {
    overflow: hidden;
}

.alpha:before {
    content: "this is ";
    font-weight: bold;
    font-style: italic;
    margin-right: 4px;
    float: left;
}

<div class='alpha'>
  <div class='beta'>
  paragraph text
  </div>
</div>