html - 在CSS中制作更长更长的斜线

目前我有一个这样的设置：
HTML格式

<div class="bp-rating">
  <sup class="small-num">8.5</sup>
  <span class="slash">/</span>
  <sub class="total-num">10</sub>
</div>

CSS

.bp-rating{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px 5px;
  border:1px solid #222;
  display:inline;
}
sup{
  color:green;
}

Codepen
我要达到的目标是：

我想知道是否有什么可以让斜线稍微斜一点，稍微长一点。
是否可以在保持细线的同时拉伸线，最好完全删除斜线字符，然后用与background类似的另一种方式来执行？

最佳答案

答案是，如果需要，可以增加高度或宽度，或者更改背景颜色：
HTML格式

<div class="bp-rating">
  <sup class="small-num">8.5</sup>
  <span class="slash"></span>
  <sub class="total-num">10</sub>
</div>

SCSS系统

.bp-rating{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px 5px;
  border:1px solid #222;
  display:inline;
  sup{
    color:green;
  }
  .slash {
    height:1px;
    width: 40px;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(-45deg)
  }
}

这里有一个工作fiddle

关于html - 在CSS中制作更长更长的斜线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39244591/