0寬度和高度影響其他元素的相對位置的DIV

我試圖讓一個「播放」圖標出現在懸停的視頻鏈接上方。爲此，我使用：before僞元素在鏈接上添加►字符。我的問題是，所有的鏈接都有相對的定位，儘管my：before元素的寬度/高度爲0，但它似乎在移動鏈接。0寬度和高度影響其他元素的相對位置的DIV

將樣式「display：inline-block;」添加到大多數瀏覽器的這個問題中，但我仍然遇到IE/Firefox的問題。

HTML

<li class="videoLinks"> 
    <a> 
     <img src="01-poster.png"> 
    </a> 
    <a> 
     <img src="02-poster.png"> 
    </a><br><br> 
    <a > 
     <img src="03-poster.png"> 
    </a></li>

CSS

.videoLinks a{ 
    display:inline-block; 
} 
.videoLinks a img{ 
    z-index:0; 
    opacity:0.7; 
    border:1px solid #808080; 
    margin-left:4px; 
    box-shadow:2px 3px 5px rgba(0,0,0,0.2); 
} 
.videoLinks a img:hover{ 
    opacity:1; 
    border:1px solid #ff6600; 
} 
    .videoLinks a:hover:before{ 
     z-index:5; 
     position:relative; top:-12px; left:30px; 
     display:inline-block; width:0px; height:0px; 
     margin:0; padding:0; border:0; 
     content:"\25BA"; /** "►" **/ 
     color:rgba(255,96,0,0.8); font-size:80px; 
     text-shadow: -1px -1px 0 rgba(0,0,0,0.2), 
       1px -1px 0 rgba(0,0,0,0.2), 
       -1px 1px 0 rgba(0,0,0,0.2), 
       1px 1px 0 rgba(0,0,0,0.2); 
     pointer-events:none; 
    }

在此先感謝

來源

2013-11-27 Liam