How do I prevent the CSS :after pseudo-element from overlapping other content? <p>I have a thumbnail gallery that I am trying to lay out using display:inline-block instead of floats so that I can use the :after pseudo to include a caption via attr(). The layout works but the :after "object" overlaps items "below" it.</p> <p>Here is my HTML:</p> <pre><code>&lt;div id="bg"&gt; &lt;div class="thumbs"&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="This is the outside of the house." /&gt;&lt;/a&gt; &lt;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." /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Here is yet another description." /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;a href="img.png" style="background-image:url('img.png')" title="Image 001" /&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Here is my CSS:</p> <pre><code>.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; } </code></pre> <p>Here is a fiddle showing an example: <a href="http://jsfiddle.net/befxe/9/" rel="nofollow">http://jsfiddle.net/befxe/9/</a></p> <p>As you can see, the second description overlaps the thumbnail that is below it. Is it possible to make it "push" the second row down (towards the bottom of the screen) automatically depending on the size of the :after content? I've tried setting both ".thumbs a" and ".thumbs a:after" to various display types (inline-block, block, etc.) and changing the positioning to no avail. I also tried to wrap the whole "a" in a div and changing the div's display types, but that didn't work either.</p> <p>Pseudo-elements like :before and :after seem like a great way to handle minor content additions like this, but their functionality in terms of layout is really confusing me as they don't seem to "work" like other DOM objects. (And for good reason, I suppose, as they aren't really DOM objects. :P)</p> <p>Any suggestions?</p>