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/

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

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

谢谢！

Answer 1

向 likebutton:before class 添加边距和填充。

截图：

//CSS

.likebutton:before{
 color: #FFFFFF;
 content: "1";
 background:blue;
 padding: 0 10px;
 margin-right: 5px;
}

Answer 2

将 display: inline-block 添加到 :before class。

Updated Fiddle.

Answer 3

为什么不结合 CSS 和 JS（例如 jQuery）？

鉴于按钮标签 'Like' 是固定的，为 content 将元素伪设置为此值，这样您就可以使用实际元素（在 JS 中可访问）来设置值关于互动：

$('#like').on('click', function() {
  $(this).text(parseInt($(this).text()) + 1);
});

button {
  background: blue;
  color: white;
  border: 1px solid blue;
  padding: 0 0 0 4px;
}
button:after {
  content: 'Like';
  display: inline-block;
  background: white;
  color: black;
  padding: 0 4px;
  margin-left: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='like'>1</button>

Answer 4

你可以这样做：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;
}

CSS 内容后有数字的按钮？

CSS button with a number after content?

html

css

jquery

button