html - 将 CSS Sprite 背景图像定位到文本右侧

Question

我有一个 css sprite，我需要将其作为背景图像放置在某些文本的右侧。就像一个外部链接图标。我还希望文本是全宽的，然后是图像。

我的CSS如下:

.container
{
    width:1247px; 
    background-color:#444;
}

.container a
{
    background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;
    height: 30px;
    width: 30px;
    display: block;
}
.container .external 
{
   background-position: -491px 2px;
}
.container .mail
{
   background-position: -526px 0px; 
}

fiddle 链接如下:

http://jsfiddle.net/6dw31962/

请帮助。提前致谢

Answer 1

试试这个。

.container {
  width:1247px;
  /*height:30px;*/    
}

.container a {
  display: block;
  position: relative;
  margin-bottom: 15px;
}
.container a:after {
  background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;
  height: 30px;
  width: 30px;
  display: inline-flex;
  content: '';
  position: absolute;
  top: -5px;
  background-position: -455px 0;
}

.container .external {
  background-position: -491px 2px;
}
.container .mail {
  background-position: -526px 0px; 
}

<div class="container">
  <a class="external" href="http://somelink.com/">MyLink</a>
  <a class="mail" href="gmail.com">Mail To Us</a>
</div>