如何防止CSS：在重叠其他内容的伪元素之后？

我有一个缩略图库，我尝试使用display：inline-block来代替浮点数，这样我就可以使用：after伪来通过attr（）包含标题。布局可以工作，但是：“对象”在“下面”与项目重叠之后。如何防止CSS：在重叠其他内容的伪元素之后？

这里是我的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）

有什么建议吗？

来源

2013-03-06 DRKMTTR

它与伪元素无关。你已经玩弄了它的定位，任何其他元素都会对你提供的样式做同样的事情。除非你的图像是纯粹的装饰（他们有一个标题/描述的事实清楚地表明它们不是装饰性的），你应该使用图像元素而不是背景。 – cimmanon 2013-03-06 01:24:17

我相信'：after'选择器基本上将内容视为原始项目的子项。它只是简单地将内容放置在原始项目[（示例）]（http://jsfiddle.net/8X7JE/）中的其他内联内容（通常是文本）之后。这就是为什么你必须定位它，以便它出现在原始项目之外。 – 2013-03-06 01:30:02

正如上面指出：

它无关，与作为一个伪元素。你已经玩弄了它的定位，任何其他元素都会对你提供的样式做同样的事情。除非你的图像是纯装饰的（他们有一个标题/描述的事实清楚地表明它们不是装饰性的），你应该使用图像元素而不是背景属性。

来源

2014-05-09 18:55:12

如何防止CSS：在重叠其他内容的伪元素之后？

回答

相关问题