不会影响居中的HTML元素的伪元素

Question

我试图在一个圆圈内显示一个完全对齐在元素中心的百分比。很酷，这很有效。

但是，我希望数值对齐中心而＃34;％＆＃34;漂浮在旁边并且不会影响展示位置。

请参阅codepen：https://codepen.io/brycesnyder/pen/MEwddv

＆＃13;

＆＃13;

div {
  font-family: sans-serif;
  height: 200px;
  width: 200px;
  background: #ae63e4;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  line-height: 1;
  color: white;
  text-align: center;
}

div.percent:after {
  content: '%';
  font-size: 30px;
  margin-bottom: 15px;
}

div.a-percent {
  position: relative;
  background: #0ebeff;
}

div.a-percent:after {
  content: '%';
  position: absolute;
  font-size: 30px;
  margin-top: 5px;
}

＆＃13;

<div class="percent">0</div>
<div class="percent">10</div>
<div class="percent">100</div>

<br>
<br>

<div class="a-percent">0</div>
<div class="a-percent">10</div>
<div class="a-percent">100</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么不在数字的左侧添加相同的百分号？

然后使用visibility: hidden隐藏此副本。

这在容器中创造了相等的平衡，数字可以完美居中。

＆＃13;

＆＃13;

div {
  font-family: sans-serif;
  height: 200px;
  width: 200px;
  background: #ae63e4;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  line-height: 1;
  color: white;
  text-align: center;
}
div::after {
  content: '%';
  font-size: 30px;
  margin-bottom: 15px;
}
div::before {
  content: '%';
  font-size: 30px;
  margin-bottom: 15px;
  visibility: hidden;
}
div.a-percent {
  background: #0ebeff;
}

＆＃13;

<div class="percent">0</div>
<div class="percent">10</div>
<div class="percent">100</div>

<br>
<br>

<div class="a-percent">0</div>
<div class="a-percent">10</div>
<div class="a-percent">100</div>

＆＃13;

＆＃13;

＆＃13;

更多详细信息和其他选项：Center and right align flexbox elements

Answer 2

似乎我已经设法通过简单地向伪元素添加绝对位置来弄清楚如何保持节奏。以前，我曾认为这会导致元素为0，它的位置。

div {
  height: 200px; width: 200px;
  background: maroon;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  &.percent {
    &:after {
      content: '%';
      position: absolute;
  }
}

Answer 3

试试这个：

div {
    font-family: sans-serif;
    height: 200px; width: 200px;
    background: #ae63e4;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    line-height: 1;
    color: white;
    text-align: center;
    &.percent {
        &:after {
            content: '%';
            font-size: 30px;
        }
    }
}