javascript - 您如何将文本样式设置为分数？

Question

我有一个样式问题，我希望字体看起来与我糟糕的 MSPaint 示例相似。

我已经尝试了无数种方法，比如使用 Bootstrap 并尝试通过网格系统构建它，但存在一些非常糟糕的空白问题，而且它的扩展性不好。

帮助会很棒。

Answer 1

您可以使用伪元素添加折扣

.discount {
  display: inline-block;
  position: relative;
  font-size: 40px;
}
.discount::after {
  content: "% off";
  display: block;
  left: 100%;
  font-size: 18px;
  line-height: 18px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

<div class="discount">50</div>