CSS前/不需要多背景後

Question

我想我的按鈕看起來像這樣在HTML：

<a href="page.html" class="button">Link</a> 

而且按鈕類如下：

.button { background:url("button_bg.png"); height:33px; display:inline-block; font-size:18px; } 
.button:before { display:inline-block; content:""; width:23px; height:33px; background:url("button_before.png"); } 
.button:after { display:inline-block; content:""; width:23px; height:33px; background:url("button_after.png"); } 

然而，有兩個我遇到的問題有：

1. 我想'之前'和'之後'顯示自己的背景。他們目前在「按鈕」類的頂部顯示其背景。
2. 文本在底部對齊。我想知道集中對齊的最佳方法。考慮到我知道按鈕的高度，我敢肯定，這是可能的CSS，但我也在努力。

還有一點需要注意：我希望「之前」和「之後」成爲超鏈接的一部分。我確定可以使用DIV來顯示這些'之前'和'之後'的圖像，但它會使它們與超鏈接分開。

Answer 1

你可以這樣對這些圖像添加爲超鏈接

樣本HTML

<a href="#"> 
<i class="first-image"></i> /**USE BACKGROUND IMAGE HERE**/ 
<span class="link-text"></span> 
<i class="second-image"></i> /** USE BACKGROUND IMAGE HERE**/ 
</a> 

對於垂直居中文本的一部分，

上的標籤使用height:33px;並設置其display:inline-block;和line-height:33px;