How to add line breaks between inline-block elements using CSS?

Question

I have list of images. I want to put a line break after the second image using CSS. I have used a CSS trick listed below but it doesn't work for the inline-block elements. It only works for display inline elements

Code that working for inline Elements.

HTML

<div>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
</div>
<div>
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
</div>

CSS

a:nth-of-type(2):after
{
    white-space: pre;content:'\A';
}
img:nth-of-type(2):after
{
    white-space: pre;content:'\A';
} 

If I am using img element which is display:inine-block by default. The above CSS does not working for it.

Check below fiddle for example

http://jsfiddle.net/murli2308/dD52z/1/

Please let me know if there any way of doing it

Note - I cannot change the HTML structure as it is coming through database.

Answer 1

You cannot use :after pseudo elements with <img> tag. This is because pseudo elements work only with double tags. For achieving the desired result you can give <br> tag after each <img> and style the <br> instead.

<div>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
</div>
<div>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
</div>

And in the css you can style the <br> tag like this:

a:nth-of-type(2):after
{
    white-space: pre;content:'\A';
}
br{
  display: none;
}
br:nth-of-type(2){
  display:block;
}