Position a pseudo element on HTML's map > area - html

Question

I'm using a HTML map, and I'd need to use pseudo-elements on its area to display badges, and to position them relatively.
Edit : I can't hard-code its coordinates 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.
Here's a screen of my attempt, and what I'd like to do :
Here's a fiddle (area on the first kitten's face)
tl;dr : Can I achieve this (by preference, in CSS only)?
What I tried
Problem, I've seen that area element is & needs to be set at display:none to work, preventing my pseudo-element to show.
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...
Using this CSS :
area{
display:block;
position:relative;
}
area::after{
display:block;
content:"10";
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;
}
I tried fiddling with margins, different positioning, different display, I didn't find the good combinaison yet.
I thought of retrieving coords of the area to position the pseudo-elements using CSS3's attr(), but I can't split the values of it afterward.
I've read this question about styling area using external (and old) jQuery plugins, but it doesn't feed my needs, and I can't find any clue on the web.
Does someone have an hint? I feel I'm close to it, but I'm running out of ideas.

Answer 1

I thought 2 idea.
One: http://jsfiddle.net/F6jtg/2/
area{
display:block;
position: absolute;
top: 40px;
left: 20px;
width: 100px;
height: 60px;
}
Two: http://jsfiddle.net/F6jtg/3/
HTML
<area
Shape="rect"
coords="20,40,120,100"
style="top: 40px; left: 20px; width: 100px; height: 60px;"
alt="Kitten 1"
href="#"></area>
CSS
area{
display:block;
position: absolute;
}