Corentin Branquet Corentin Branquet - 3 months ago 8
CSS Question

pseudo :before outside of div

I've wrote this 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>





What I want is to put the
:before
content outside div but still collapse to it and not inside.

Thanks for your help !

Answer

You can use transform: translateX(-100%) with left: 0 and add position: relative on parent

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>