jquery - 内容后带有数字的 CSS 按钮？

Question

我想要一个带有数字的按钮，像这样:

10 个赞

每次有人点击这个赞，这个数字就会增加。

我的问题是在 css 部分。我怎样才能做到这一点？我应该在 CSS 中使用 float:left 还是 :after？

如果使用之后，我可以在JS中更改这个content:number吗？

这是我的尝试:

<style>
.likebutton{
 width:100px;
 border:1px solid blue;
}
.likebutton:before{
 color: #FFFFFF;
 content: "1";
 background:blue;
}
</style>

<div class=likebutton>Like</div>

https://jsfiddle.net/v52aqo1s/

但数字不是全高，我想在该数字内容宽度中提供移动空间...

最好的方法是什么？向左或向后 float ？有人可以帮助我吗？

谢谢!

Answer 1

你可以这样做:https://jsfiddle.net/v52aqo1s/2/

就像@LinkinTED 说的，使用 display: inline-block。

您可以使用数据属性来保存点赞的值，这将使它更容易并保持您的 HTML 和 CSS 整洁干净

.likebutton{
    width:100px;
    border:1px solid blue;
}
.likebutton:before{
    color: #FFFFFF;
    content: attr(data-likes);
    background:blue;
    display: inline-block;
    padding: 15px;
    margin-right: 15px;
}