如何防止CSS:after伪元素与其他内容重叠？

我有一个缩略图库，我正试图使用display:inline块而不是float来布局它，这样我就可以使用：after伪函数通过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>

下面是一把小提琴，展示了一个例子：

如您所见，第二个描述与它下面的缩略图重叠。是否可以根据：after内容的大小自动向下“推”第二行（朝向屏幕底部）？我尝试将“.thumbs a”和“.thumbs a:after”都设置为各种显示类型（内联块、块等），但更改位置无效。我还尝试将整个“a”封装在一个div中，并更改div的显示类型，但这也不起作用

像：before和：after这样的伪元素似乎是处理像这样的次要内容添加的好方法，但它们在布局方面的功能确实让我困惑，因为它们似乎不像其他DOM对象那样“工作”。（我想这是有原因的，因为它们不是真正的DOM对象。：P）

有什么建议吗？

如上所述：

---

它与作为伪元素无关。如果您玩弄了它的定位，那么任何其他元素都会对您提供的样式执行相同的操作。除非您的图像纯粹是装饰性的（它们有标题/描述这一事实清楚地表明它们不是装饰性的），否则您应该使用image元素而不是background属性

---

它与作为伪元素无关。如果您玩弄了它的定位，那么任何其他元素都会对您提供的样式执行相同的操作。除非您的图像纯粹是装饰性的（事实上，它们有标题/描述清楚地表明它们不是装饰性的），否则您应该使用图像元素而不是背景。我相信

：after

选择器基本上将内容视为原始项的子项。它只是将内容明显地放在原始项中其他内联内容（通常是文本）之后。这就是为什么您必须对其进行定位，使其显示在原始项目之外的原因。

.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;
}