css - 多个 before 语句。有没有一种方法可以使用更少的代码来做同样的事情？

Question

对了，我有一些用来制作按钮的 CSS 代码。我使用伪元素来创建我的按钮图标，并从 sprite 表加载我的按钮。在我的示例中，我有 3 个按钮，但有时我有更多。

如果你研究我的 css，你会发现每个伪元素之间唯一变化的是 Sprite 位置。所以很多代码都是重复的。

无论如何我可以使用更少的代码，但做同样的事情吗？

.add_button,
.excel_button,
.history_button {
    color: #000;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 2px;
    border-radius: 5px;
    border: 2px solid #009900;
    height: 25px;
    width: 165px;
    margin-bottom: 5px;
    cursor: pointer;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
     position: relative; 
}
.add_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") 0px 0px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}
.excel_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") -99px -50px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}
.history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") -125px 0px no-repeat;
    float: left; 
    margin: -1px 10px 0px 0;
}

Answer 1

是这样的吗？

.add_button::before, .excel_button::before, .history_button::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url("../../images/buttons/buttons_25x25.png") 0 0 no-repeat;
    float: left; 
    margin: -1px 10px 0 0;
}
.excel_button::before {
    background-position: -99px -50px;
}
.history_button::before {
    background-position: -125px 0;
}