html - 不需要的多个背景之前/之后的 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;