在HTML地图上定位一个伪元素＆gt;区域

Question

我使用的是HTML map，我需要在area上使用伪元素来显示徽章，并相对定位徽章。

编辑：我无法对其坐标进行硬编码，因为我要处理HTML无法预测的大量区域，因为我的代码是注入现有HTML的顶部。

这是我尝试的屏幕，以及我想做的事情：

Here's a fiddle（第一只小猫脸上的区域）

tl; dr：我可以实现这一目标（首选，仅限CSS）吗？

---

我尝试了什么

问题，我已经看到area元素是＆amp;需要设置为display:none才能正常工作，从而阻止我的伪元素显示。

所以，我把它作为一个块，它仍然在地图上的位置（好）并且我的伪元素出现，但不是相对于该区域的实际坐标......

使用此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;
}

我试着摆弄边缘，不同的位置，不同的显示，我还没有找到好的组合。

我想要检索区域的coords以使用CSS3 attr()来定位伪元素，但之后我无法拆分它的值。

我已经使用外部（和旧版）jQuery插件阅读this question关于样式area，但它并不能满足我的需求，我找不到任何内容网络上的线索。

有人有提示吗？我觉得我很接近它，但我的想法已经不多了。

Answer 1

我想到了2个想法。

一：http://jsfiddle.net/F6jtg/2/

area{
    display:block;
    position: absolute;
    top: 40px; 
    left: 20px; 
    width: 100px; 
    height: 60px; 
}

二：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;
}