如何显示2/4和＃34;页码/总页数等文本＃34;在css或css3中

Question

我希望将我的文字显示为＆＃34;当前页码/总页数＆＃34;使用CSS

Html代码：

<p class="pagenumber> 2 / 5 </p>

你能帮忙吗？

Answer 1

一个解决方案，其中包含两个额外的数字元素和一个用于分界线的伪元素。

您仍需要针对您的设计和布局进行调整，以使其看起来更好。

＆＃13;

＆＃13;

.pagenumber {
  position: relative;
  width: 3em;
  height: 3em;
  background: #aaa;
  border-radius: 50%;
  color: #fff;
}
.pagenumber:before {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  top: 50%;
  height: 1px;
  background: #fff;
  transform: rotate(-30deg);
}
.pagenumber .current {
  position: absolute;
  text-align: right;
  right: 1.5em;
  top: 0.5em;
}
.pagenumber .total {
  position: absolute;
  left: 1.5em;
  bottom: 0.5em;
}

＆＃13;

<div class="pagenumber">
  <div class="current">2</div>
  <div class="total">5</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

body {
  font-size: 12px;
}
.pages {
  border-radius: 50%;
  background: black;
  display: table;
  height: 6em;
  width: 6em;
  color: white;
  vertical-align: middle;
  font-style: italic;
}
.pages * {
  display: table-cell;
  font-size: 200%;
}
.pages sup {
  vertical-align: middle;
  padding-bottom: 15%;
  text-align: right;
}
.pages sub {
  vertical-align: middle;
  padding-top: 15%;
  text-align: left;
}
.pages span {
  vertical-align: middle;
  font-size: 350%;
  text-align: center;
}

＆＃13;

<p class="pages">
  <sup>6</sup><span>/</span><sub>7</sub>
</p>

＆＃13;

＆＃13;

＆＃13;