我正在解析一个文本文件，其中包含对本地图像的引用，后跟坐标。

Click "{ImageFolder}/1411634917956.png" 8 29
Click "{ImageFolder}/3465738200284.png" 23 45
Click "{ImageFolder}/7848239847583.png" 38 15

输出是一个 html 文件，显示上面解析为 html 的图像文本：

<img src="./scripts/images/1411634917956.png">
<img src="./scripts/images/3465738200284.png">
<img src="./scripts/images/7848239847583.png">

我还想解析坐标，这意味着从顶部开始的图像高度百分比和从左侧开始的图像宽度百分比，以便在指定坐标上的图像上添加一个红点。

我尝试了以下方法，但 :before 标签似乎没有动态更新

演示

div:before{
    position: absolute;
    left: 50%;
    top: 50%;
    width:5px;height:5px;
    background:red;
    content:'';
}
div {
    position: absolute;
}

<div>
    <img style="left:10%;top:10%;" src="https://static.boredpanda.com/blog/wp-content/uploads/2016/02/japanese-grumpy-cat-angry-koyuki-moflicious-22.jpg"/>
</div>

.container{
  height:100vh;
  display:flex;
  justify-content:center;
}
.image-container{
height:100%;
  position:relative;
}

img{
  height:100%;
}

.image-container:before{
  content:"";
    position: absolute;
    padding: 10px;
    background: red;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}

<div class="container">
  <div class="image-container">
    <img src="https://static.boredpanda.com/blog/wp-content/uploads/2016/02/japanese-grumpy-cat-angry-koyuki-moflicious-22.jpg"/>
</div>
</div>