前端实现文字上面的小红点或者hot字样

1.文字上面加小红点最终实现效果如下：

HTML实现代码

<template lang="pug">
  .message 消息
    span.dot
</template>

CSS样式代码

<style lang="scss">
.message {
  font-size: 16px;
  text-align: center;
  .dot {
    display: inline-block;
    background: red;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    vertical-align: super;
  }
}
</style>

2.文字上面hot字样，最终实现效果：

HTML代码同上CSS代码只需要做小小的修改

<style lang="scss">
.message {
  font-size: 16px;
  text-align: center;
  .dot {
    display: inline-block;
    background: url('~@/assets/images/hot-icon.png') no-repeat center;
    vertical-align: super;
    width: 24px;
    height: 12px;
    background-size: cover;
  }
}
</style>