html - 在图像( map )上自定义绝对定位的 FontAwesome 标记

Question

我使用 FontAwesome 在 map 上绝对定位了标记，这样我就可以调整 map 的大小并且图像保持相同的相对位置。

每个都有一个数字，FontAwesome 字符是一个圆圈，但我希望使用伪元素并将数字定位在圆圈中并有一个标记。

这可能吗？我尝试了许多不同的方法，但没有一种对我有用。

请看下面的例子；

.map-marker {
    position: absolute;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
}
#one {
    top: 70px;
    left: 20px;
}
#one:after {
    content: "\f111";
    font-family: 'FontAwesome';
}
#two {
    top: 50px;
    left: 260px;
}
#two:after {
    content: "\f111";
    font-family: 'FontAwesome';
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="map_container">
  <img src="http://geology.com/world/world-map-clickable.gif"/>
  <a href="#"><div id="one" class="map-marker" aria-hidden="true">1</div></a>
  <a href="#"><div id="two" class="map-marker" aria-hidden="true">2</div></a>
</div>

Answer 1

您可以使 a 处于绝对位置，然后在其上使用 before(或 after)。这样，您将在其中包含两个不同的元素，您可以使用每个元素的 z-index 来制作数字下方的伪元素。

您还可以简化您的 CSS，因为 one 和 two 的伪元素相同

.map-marker {
  position: absolute;
  font-size: 20px;
  text-shadow: 1px 1px 1px #000;
  text-decoration:none;
}
.map-marker span {
  position:relative;
  z-index: 2;
  color:#fff;
}
.map-marker:before {
  content: "\f111";
  font-family: 'FontAwesome';
  position: relative;
  right: -14px;
  z-index: 0;
}
#one {
  top: 70px;
  left: 20px;
}

#two {
  top: 50px;
  left: 260px;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="map_container">
  <img src="http://geology.com/world/world-map-clickable.gif" />
  <a href="#" id="one" class="map-marker">
    <span aria-hidden="true">1</span>
  </a>
  <a href="#" id="two" class="map-marker">
    <span aria-hidden="true">2</span>
  </a>
</div>