每个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>

​