html - 数字叠加 css 设计，如 1/1、1/2

Question

想找图片中的这种设计，但是没有得到。

.bottom {
      font-size: 2.5em;
      font-family: newparisreg;
      color: #a9aaac;
      letter-spacing: -4px;
    }
    .Slash {
      color: rgba(167, 175, 179, 0.5);
      font-family: "newparisreg";
      font-size: 4em;
      letter-spacing: -4px;
    }
    
    .top {
      font-size: 2.5em;
      font-family: Roboto;
      vertical-align: top !important;
      letter-spacing: -4px;
      color: #000;
    }

  <span className="top">1</span><span
                        className="Slash">/</span><span
                        className="bottom">3</span></div>

Answer 1

这是利用一个元素利用伪元素和 content 属性的力量完成的。

.fraction{
  font-size:3em;
}

.fraction:before{
  content:attr(data-nom);
  vertical-align:super;
  font-size:.5em;
}

.fraction:after{
  content:attr(data-dem);
  vertical-align:middle;
  font-size:.5em;
}

<span class="fraction" data-nom="1" data-dem="3">/</span>