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

Question

我有一个缩略图画廊，我想使用display:inline-block而不是float来布局，以便我可以使用:after伪元素通过attr()包含标题。布局有效，但:after“对象”会重叠在其“下方”的项目上。

这是我的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;
}

这里有一个演示例子的fiddle：http://jsfiddle.net/befxe/9/。如您所见，第二个描述文字重叠在它下方的缩略图上面了。是否有可能根据:after内容的大小自动将第二行向下（朝屏幕底部）"推"？我尝试将".thumbs a"和".thumbs a:after"都设置为各种显示类型（inline-block、block等），并更改它们的定位方式，但都没有成功。我还尝试将整个"a"包装在一个div中，并更改该div的显示类型，但也没用。

像:before和:after这样的伪元素似乎是处理此类小型内容添加的好方法，但就布局而言，它们的功能确实让我感到困惑，因为它们似乎不像其他DOM对象那样“有效”。 （我想这是有充分的理由的，因为它们实际上并不是DOM对象。:P）

有什么建议吗？

- Kane Ford

---

这与伪元素无关。您已经玩弄了它的定位，任何其他元素都可以使用您提供的样式执行相同的操作。除非您的图像纯粹是装饰性的（它们有标题/描述清楚地表明它们不是装饰性的），否则应该使用图像元素而不是背景。 - cimmanon

我相信:after选择器本质上把内容视为原始项目的子级。它仅将内容可见地放置在原始项目内的其他行内内容（通常是文本）之后（示例）。这就是为什么您不得不定位它，以便首先出现在原始项目之外。 - Ruben Infante

Answer 1

如上所述：

它与伪元素无关。您已经玩弄了其定位，任何其他元素在提供的样式下都会执行相同的操作。除非您的图像纯粹是装饰性的（它们具有标题/描述的事实明确表明它们不是装饰性的），否则应该使用图像元素而不是背景属性。

- Paul Sweatte