css - 伪 :before outside of div

Question

我写了这个CSS:

div {
  width: 500px;
  height:150px;
  margin-left:150px;
  background: lightblue;
}

div::before {
  content:'';
  width:50px;
  height:150px;
  display: inline-block;
  background:red;
  position: absolute;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>

我想要的是将 :before 内容放在 div 外部，但仍然折叠到它而不是内部。

感谢您的帮助!

Answer 1

您可以将 transform:translateX(-100%) 与 left: 0 一起使用，并在父级上添加 position:relative

div {
  width: 500px;
  height: 150px;
  margin-left: 150px;
  background: lightblue;
  position: relative;
}
div::before {
  content: '';
  width: 50px;
  height: 150px;
  left: 0;
  display: inline-block;
  transform: translateX(-100%);
  background: red;
  position: absolute;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>