在 HTML 地图 > 区域上放置一个伪元素

Question

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

编辑：我不能硬编码它的坐标，因为我要处理 HTML 中的很多我无法预测的区域，因为我的代码是从顶部注入的现有的 HTML。

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

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

tl;dr ：我可以实现这一点（根据偏好，仅在 CSS 中）？

---

我尝试了什么

问题，我已经看到 area 元素 & 需要设置为 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() 定位伪元素，但之后我无法拆分它的值。

我已经阅读了this question 关于使用外部（和旧的）jQuery 插件对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;
}