es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • CSS permite que los elementos antes/después estén fuera de un div cuando el elemento padre tiene desbordamiento.

CSS permite que los elementos antes/después estén fuera de un div cuando el elemento padre tiene desbordamiento.

19 Jul, 2023 Programación

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:

imagen

<!-- 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 -->
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    <div class="container">

  <div class="parent of">
    Texto
    Texto
    Texto
    Texto
  </div>

  <div class="parent">
    Texto
    Texto
    Texto
    Texto
  </div>

</div>

    .container {
  display: flex;
}

.parent {
  width: 100%;
  height: 50px;
  background: black;
  margin: 10px;
  position: relative;
  overflow: auto;
}

p {
  color: white;
}

p::after {
  position: absolute;
  bottom: -8px;
  left: -16px;
  content: '';
  height: 2px;
  background: green;
  width: 2.313rem;
  z-index: 1;
}

    En este código, el div parent está configurado con position: relative y overflow: auto, mientras que el pseudo-elemento p::after está configurado con position: absolute y z-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 div parent para demostrar que el código sigue funcionando con la función de desplazamiento.

Comments are closed.