要实现图片中标记的功能,需要怎么做?

 

你是要实现标记类型的(即类似于上标的那种)用现成的库做,或者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;