title: Position a pseudo element on HTML's map > area
body: <p>I'm using a HTML <code>map</code>, and I'd need to use pseudo-elements on its <code>area</code> to display badges, and to position them relatively.</p>
  <p>Edit : I can't <strong>hard-code its coordinates</strong> because I'm going to deal with lots of area in a HTML I can't predict, as my code is injected of top of an existing HTML.</p>
  <p>Here's a screen of my attempt, and what I'd like to do :
  <img src="https://i.stack.imgur.com/t9JFp.png" alt="enter image description here" /></p>
  <p><a href="http://jsfiddle.net/bigood/F6jtg/1/" rel="nofollow noreferrer">Here's a fiddle</a> (area on the first kitten's face)</p>
  <p>tl;dr : Can I achieve this (by preference, in CSS only)?</p>
  <hr />
  <h2>What I tried</h2>
  <p>Problem, I've seen that <code>area</code> element is &amp; needs to be set at <code>display:none</code> to work, preventing my pseudo-element to show.</p>
  <p>So, I made it a block, it still have its position on the map (good) and my pseudo element appears, but not relative to the actual coordinates of the area...</p>
  <p>Using this CSS :</p>
  <pre><code>area{
      display:block;
      position:relative;
  }
  area::after{
      display:block;
      content:&quot;10&quot;;
      position:absolute;
      left:0px;
      top:0px;
      text-align:center;
      color:white;
      width:20px;
      height:20px;
      background-color:red;
      border-radius:20px;
      border:1px solid red;
  }
  </code></pre>
  <p>I tried fiddling with margins, different positioning, different display, I didn't find the good combinaison yet.</p>
  <p>I thought of retrieving <code>coords</code> of the area to position the pseudo-elements using CSS3's <code>attr()</code>, but I can't split the values of it afterward.</p>
  <p>I've read <a href="https://stackoverflow.com/questions/5026421/apply-css-to-area-map">this question</a> about styling <code>area</code> using external (and old) jQuery plugins, but it doesn't feed my needs, and I can't find any clue on the web.</p>
  <p>Does someone have an hint? I feel I'm close to it, but I'm running out of ideas.</p>