要实现图片中标记的功能，需要怎么做？

Question

 

Answer 1

你是要实现标记类型的（即类似于上标的那种）用现成的库做，或者css中的::before 或者::after 伪类就可以。示例如下，颜色啥的自己改吧：

<div style="position:relative">
  <div class="count">test
</div>
</div>

对应的css 如下：

count::after {
    content: "1";
    color: red;
    position: absolute;
    border: solid 1px red;
    top: -10px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 10px;
    background-color: yellow;
}

如果只是一个普通的元素要这个效果那么用下面的代码：

<div class="count">1</div>

width: 20px;
height: 20px;
background: red;
line-height: 20px;
text-align: center;
border: solid 1px green;
border-radius: 50%;
color: red;