如何防止::after元素将文本从中心移动?
#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;
}
我有了这个css，一切都很好，除了year元素被移出了中心，因为::after元素。
我需要添加left: 6px;为了解决这个问题，但我想知道它是否可能打破某些页面大小的页面，所以我想知道是否有一种方法可以做到这一点，而不改变左属性的年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>
这是我正在使用的html。
https://codepen.io/codepen_user_123/pen/vYXMjjX
你可以让它的位置绝对，而不是浮动。
#pagination div.year::after {
content: "";
display: block;
border-top: 4px solid #c7c7c7;
width: 12px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}