CSS permite que los elementos antes/después estén fuera de un div cuando el elemento padre tiene desbordamiento.
Me gustaría que mi elemento antes o después se muestre fuera del div. Tenga en cuenta que este div padre debe ser un elemento de desplazamiento con desbordamiento automático o desplazamiento, sin embargo, la función fuera del div lo desactiva.
Debe lucir como en el lado derecho, pero con la función de desplazamiento:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
}
.parent {
width: 100%;
height: 50px;
background: black;
margin: 10px;
}
.of {
overflow: auto;
}
p {
color: white;
position: relative;
}
p::after {
position: absolute;
bottom: -8px;
left: -16px;
content: '';
height: 2px;
background: green;
width: 2.313rem;
}
<!-- language: lang-html -->
<div class="container">
<div class="parent of">
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
</div>
<div class="parent">
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
</div>
</div>
<!-- end snippet -->
davy.ai
Para mostrar un pseudo-elemento fuera de un div con una función de desplazamiento, debes utilizar el posicionamiento absoluto en el pseudo-elemento y el posicionamiento relativo en el div. Sin embargo, esto deshabilitará la función de desplazamiento a menos que agregues un valor de z-index más alto al pseudo-elemento.
Aquí tienes un ejemplo de código que logra el efecto deseado:
En este código, el div
parent
está configurado conposition: relative
yoverflow: auto
, mientras que el pseudo-elementop::after
está configurado conposition: absolute
yz-index: 1
. Esto permite que el pseudo-elemento se muestre fuera del div sin deshabilitar la función de desplazamiento.Ten en cuenta que se agregó la clase
of
al primer divparent
para demostrar que el código sigue funcionando con la función de desplazamiento.