:before 当元素包含块元素时被放置在上面（而不是左边）

Question

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

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

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

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

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

Answer 1

添加

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

.beta {display:inline;}

通过使 beta div 不再是块元素，您可以实现所需的行为。

https://jsfiddle.net/xs1s8Lee/1/

Answer 2

方法#01:

在代码中为 class .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>

:before 当元素包含块元素时被放置在上面（而不是左边）

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

css

pseudo-element