Как предотвратить CSS: после псевдоэлемента от перекрытия другого содержимого?

Question

У меня есть галерея миниатюр, которую я пытаюсь выложить с помощью display: inline-block вместо float, чтобы я мог использовать: после псевдо, чтобы включить подпись через attr(). Макет работает, но после: «объект» перекрывает элементы «ниже».

Вот мой HTML:

<div id="bg"> 
    <div class="thumbs"> 
     <a href="img.png" style="background-image:url('img.png')" title="This is the outside of the house." /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="This is another example of a description. This is another example of a description. This is another example of a description. This is another example of a description." /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Here is yet another description." /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
     <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a> 
    </div> 

Вот мой CSS:

.thumbs a{ 
width:120px; 
height:120px; 
display:inline-block; 
border:7px solid #303030; 
box-shadow:0 1px 3px rgba(0,0,0,0.5); 
border-radius:4px; 
margin: 6px 6px 40px; 
position:relative; 
text-decoration:none; 

background-position:center center; 
background-repeat: no-repeat; 

background-size:cover; 
-moz-background-size:cover; 
-webkit-background-size:cover; 

vertical-align:top; 
} 

.thumbs a:after{ 
background-color: #303030; 
border-radius: 7px; 
bottom: -136px; 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 
color: #FFFFFF; 
content: attr(title); 
display: inline-block; 
font-size: 10px; 
max-width: 90px; 
overflow: auto; 
padding: 2px 10px; 
position: relative; 
text-align: center; 
white-space: no-wrap; 
} 

Вот скрипка, показывающий пример: http://jsfiddle.net/befxe/9/

Как вы можете видеть, второе описание перекрытий миниатюру, которая находится ниже нее. Можно ли заставить его «нажимать» вторую строку вниз (в нижней части экрана) автоматически в зависимости от размера: после содержимого? Я попробовал установить оба параметра «.thumbs a» и «.thumbs a: after» на различные типы отображения (встроенный блок, блок и т. Д.) И изменение позиционирования безрезультатно. Я также попытался обернуть целое «a» в div и изменить типы отображения div, но это тоже не сработало.

Псевдоэлементы, такие как: до и: после кажутся отличным способом обработки небольших дополнений контента, как это, но их функциональность с точки зрения макета действительно меня сбивает с толку, поскольку они, похоже, не «работают», как другие DOM объекты. (И не зря, я полагаю, поскольку они не являются объектами DOM.: P)

Любые предложения?

Answer 1

Как было отмечено выше:

Это не имеет ничего общего с бытием псевдо элемент. Вы играли с позиционированием, любой другой элемент будет делать то же самое со стилями, которые вы предоставили. Если ваши изображения не являются чисто декоративными (тот факт, что у них есть подпись/описание, ясно означает, что они не являются декоративными), вы должны использовать элемент изображения вместо свойства фона.