彼此的数字css设计如1/1,1 / 2

Question

在图像中寻找这种设计但却无法获得它。

＆＃13;

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>