Testing psuedo elements

dabblet.css

/**
 * Testing psuedo elements
 */

section {
width: 940px;
margin:0px 100px;
position:relative;
}

img {
border: 5px solid red;
}

section.entry-content img:nth-of-type(2n):after {
/* doesn't work check img and after and before pseudo elements*/
content:"this should be blue";
background:yellow;
}
section.entry-content img:nth-of-type(2n)  {
border: 10px solid blue;
}

dabblet.html

<section class="entry-content clearfix" itemprop="articleBody">
<h3>Founder &amp; Leadership Team</h3>
<h2>Our Mission</h2>
<p>Our mission is to do good</p>
<img class="size-thumbnail wp-image-177 alignright"  src="http://placehold.it/350x150&text=1stimage+red+boarder" >
<h2>The Journey:</h2>
<img class="alignleft size-thumbnail wp-image-178" src="http://placehold.it/350x150&text=1stimage+blue+boarder">

<p>list intro</p>
<ul>
<li>Have the opportunity to discover their true gifts and aspirations</li>
<li>Understand the significance of creating vision boards</li>
<li>Come into contact with young female entrepreneurs</li>
<li>Experience weekend adventures to broaden their horizon</li>
<li>Gain the tools that will help them be an inspiration to their peers</li>
</ul>
<p> third image </p>
<img class="alignleft size-thumbnail wp-image-178" alt="IMG_0380" src="http://placehold.it/350x150&text=1stimage+red+boarder">


</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}