¿Cómo evitas que el elemento :: after mueva tu texto centrado lejos del centro?

#pagination div {
  width: 30%;
  display: inline-block;
}

#pagination {
  width: 100%;
  text-align:center;
}

#pagination div.number {
  position: relative;
  width: 100%;
  color: #fff;
  top: -65px;
  font-size: 3rem;
}

#pagination div.year {
  width: 100%;
  position: relative;
  top: -40px;
  color: #c7c7c7;

}

#pagination div.year::after {
  content: "";
  display: block;
  margin-top: 8px;
  border-top: 4px solid #c7c7c7;
  width: 12px;
  float:right;
}

#pagination div.link-wrapper:last-child div.year::after {
  content: none;
  border: none;
}

#pagination div.link-wrapper:last-child div.year {
  left:0px;
}

Tengo este CSS y todo funciona bien, excepto que el elemento year se aleja del centro debido al elemento :: after.

Necesito agregar a la izquierda: 6px; para solucionar este problema, pero me pregunto si podría romper la página en cierto tamaño de página, así que me preguntaba si había una manera de hacerlo sin cambiar la propiedad izquierda para el año div.

<body>
    <div id="pagination"><div class="link-wrapper"><div>
    </div><div class="number">4</div><div class="year">2020</div></div><div class="link-wrapper"><div>
    </div><div class="number">4</div><div class="year">2019</div></div><div class="link-wrapper"><div>
    </div><div class="number">3</div><div class="year">2018</div></div></div>
</body>

Este es el html con el que estoy trabajando.

https://codepen.io/codepen_user_123/pen/vYXMjjX

0
caesar 21 ene. 2021 a las 19:44

1 respuesta

La mejor respuesta

En su lugar, podría hacer que la posición sea absoluta si lo flota.

#pagination div.year::after {
  content: "";
  display: block;
  border-top: 4px solid #c7c7c7;
  width: 12px;

  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
0
Rod911 21 ene. 2021 a las 16:56