使按钮收缩包装为伪元素图标的大小

Question

是否可以将这些按钮缩小到其伪元素的大小？理想情况下使用当前标记。还有一个span应该被考虑在等式中。

目前的结果：

期望的结果：

body {
    padding: 20px 0 0 50px;
}
.button, .button:after {
    position: absolute;
}
.button {
    border: 5px solid blue;
    /* overflow: hidden; */
}
.button:after {
    text-indent: -9999px;
    background-image: url(http://s27.postimg.org/lde21hwvz/test.png);
    background-repeat: none;
    content:"";
    border: 1px solid #ccc;
}
.like, .dislike {
    float: left;
    height: 20px;
    margin-right: 30px;
    position: relative;
}
.like:after, .dislike:after {
    background-position: 0 0;
    top: -13px;
}
.like:after {
    height: 22px;
    width: 40px;
}
.dislike:after {
    background-position: -60px 0;
    height: 12px;
    width: 22px;
}

<a class="like button">
    <span>1234</span>
</a>
 <a class="dislike button">
    <span>1</span>
</a>

Answer 1

  

是否可以使这些按钮收缩包装到它们的大小   伪元素？

除非您通过absolute定位从正常流中删除伪元素。

因此，请尝试删除position: absolute;，而是将display: inline-block;添加到伪元素中。

＆＃13;

＆＃13;

body {
    padding: 20px 0 0 50px;
}
.button, .button:after {
    /*position: absolute;*/
    display: inline-block;
    vertical-align: middle;
}
.button {
    border: 5px solid blue;
    /* overflow: hidden; */
}
.button:after {
    text-indent: -9999px;
    background-image: url(http://s27.postimg.org/lde21hwvz/test.png);
    background-repeat: none;
    content:"";
    border: 1px solid #ccc;
}
.like, .dislike {
    float: left;
    height: 20px;
    margin-right: 30px;
    position: relative;
}
.like:after, .dislike:after {
    background-position: 0 0;
    top: -13px;
}
.like:after {
    height: 22px;
    width: 40px;
}
.dislike:after {
    background-position: -60px 0;
    height: 12px;
    width: 22px;
}

＆＃13;

<a class="like button">
    <span>1234</span>
</a>
 <a class="dislike button">
    <span>1</span>
</a>

＆＃13;

＆＃13;

＆＃13;