How do you prevent the ::after element from moving your centered text away from the center?
#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;
}
I have this css and everything works fine, except the year element gets moved away from the center because of the ::after element.
I need to add left: 6px; in order to fix this issue, but I am wondering if it might break the page on certain page size, so I was wondering if there was a way to do this without changing the left property for the year 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>
This is the html I am working with.
https://codepen.io/codepen_user_123/pen/vYXMjjX
question from:
https://stackoverflow.com/questions/65831912/how-do-you-prevent-the-after-element-from-moving-your-centered-text-away-from 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
