位置CSSスプライトテキストの右側にある画像

Question

テキストの右側に背景画像として配置する必要があるCSSスプライトがあります。外部のリンクアイコンのように。また、私はテキストが完全な幅に続いて画像を望んでいます。次のように

私の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; 
} 

フィドルのリンクは以下の通りです：

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>