如何防止::after 元素将居中的文本从中心移开？

Question

How do you prevent the::after element from moving your centered text away from the center?如何防止::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;
}

I have this css and everything works fine, except the year element gets moved away from the center because of the::after element.我有这个 css 并且一切正常，除了 year 元素因为 ::after 元素而远离中心。

I need to add left: 6px;我需要添加 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.为了解决这个问题，但我想知道它是否可能会破坏特定页面大小的页面，所以我想知道是否有一种方法可以在不更改 year div 的 left 属性的情况下做到这一点。

<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.这是我正在使用的 html。

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

Answer 1

You could make it position absolute instead if floating it.如果浮动它，您可以将其设为 position 绝对值。

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

  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

如何防止::after 元素将居中的文本从中心移开？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-01-21 16:56:48

如何防止::after 元素将居中的文本从中心移开？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-01-21 16:56:48

解决方案1
0 已采纳 2021-01-21 16:56:48