псевдо: прежде, чем снаружи 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>

Answer 2

У вас есть несколько вариантов, я бы использовать свойство, которое требует только одну записи стиля преобразования.

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

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

Answer 3

Вы можете сделать это с левой собственностью: до и настройки DIV в положение относительного

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

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