title: why this pseudo class selector is not working?
body: <p>I'm trying to use :after selector to draw a inside-border in every div I hover. Now the &quot;:after&quot; pseudo class doesn't work? any idea why this selector doesn't work? if I just use the :hover pseudo class works, the thing is that I want to use both classes!</p>
  <p>Have a look at this <a href="http://jsbin.com/akidax/edit#html,live" rel="nofollow noreferrer">EX</a></p>
  <p>thanks!</p>
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;h1&gt;Example Six&lt;/h1&gt;
                  
      &lt;p&gt;Grade: A&lt;/p&gt;
      &lt;p&gt;this is the thing&lt;/p&gt;
  
      &lt;div class=&quot;w3c&quot;&gt;
          &lt;div id=&quot;tab16&quot;&gt;
              &lt;a href=&quot;#tab16&quot;&gt;cars&lt;/a&gt;
              
              &lt;div class=&quot;test&quot;&gt;
                  &lt;div&gt;&lt;img alt=&quot;&quot; src=&quot;http://placehold.it/176x106/&quot; /&gt;&lt;/div&gt;
              &lt;/div&gt;                    
          &lt;/div&gt; &lt;!-- ends tab16 --&gt;        
          &lt;div id=&quot;tab17&quot;&gt;
              &lt;a href=&quot;#tab17&quot;&gt;othercars&lt;/a&gt;
          &lt;div&gt;
              &lt;div&gt;&lt;img alt=&quot;&quot; src=&quot;http://placehold.it/180x110/&quot; /&gt;&lt;/div&gt;
              &lt;div&gt;&lt;img alt=&quot;&quot; src=&quot;http://placehold.it/180x110/&quot; /&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- ends .w3c --&gt;
  &lt;/body&gt;
  </code></pre>
  <p>The css:</p>
  <pre class="lang-css prettyprint-override"><code>@charset &quot;utf-8&quot;;
  /* CSS Document */
      
  .w3c {
      min-height: 250px;
      position: relative;
      width: 554px;
  }
  .w3c &gt; div {
      display: inline;
  }
  .w3c &gt; div &gt; a {
      margin-left: -1px;
      position: relative;
      left: 1px;
      text-decoration: none;
      color: #fff;
      background: #666666;
      display: block;
      float: left;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-bottom: 1px solid white;
  }
  .w3c &gt; div:not(:target) &gt; a {
      border-bottom: 0;
      background: #b0b0b0;
      /*-moz-linear-gradient(top, white, #eee); */
  }   
  .w3c &gt; div:target &gt; a {
      background: white;
      color: #b0b0b0;
  }
                  
  .w3c &gt; div &gt; div {
      background: white;
      z-index: 0;
      left: 0;
      top: 30px;
      bottom: 0;
      right: 0;
      padding: 10px;
      border: 1px solid #ccc;
      width: 596px;
      height: 133px;
  }   
  .w3c  div  div &gt; div {
      border: 1px solid red;
      float: left;
      width: 180px;
      height:110px;
      margin-left: 10px;
  }
  .w3c  div div &gt; div:hover:after {
      border: 1px solid black;
      width:178px;
      height: 108px;
  }
              
  /* .w3c &gt; div &gt; div &gt; a  &gt; img:after {
      border: 2px solid black;
      width:178;
      height: 108px;
  } */
  .w3c &gt; div:not(:target) &gt; div {
      position: absolute;
  }
  .w3c &gt; div:target &gt; div {
      position: absolute;
      z-index: 1;
  }
  </code></pre>