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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你有几个选项，我会使用只需要一个样式条目的transform属性。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

你可以使用：before和left div将div设置为相对位置

＆＃13;

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

＆＃13;

<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>

＆＃13;

伪：在div之外

3 个答案: