Place a red dot on images with CSS-CodePudding

I am parsing a text file which contains references to local images followed by coordinates.

Click "{ImageFolder}/1411634917956.png" 8 29

The output is a html file displaying the images Text above parsed to html:

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

I also want to parse the coordinates, which means % of image height from top and % of image width from left, to add a red dot to the image on the specified coordinates.

I have tried the following, but the :before tag doesn't seem to be dynamically updated

DEMO

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

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

CodePudding user response：

Use a separate div for the red dot. Override its left and top in a style attribute. Modified your example to place the dot at 40%/20%:

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

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

CodePudding user response：

position it absolute and then change top and left OR bottom and right value.

.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 >
  <div >
    <img src="https://static.boredpanda.com/blog/wp-content/uploads/2016/02/japanese-grumpy-cat-angry-koyuki-moflicious-22.jpg"/>
</div>
</div>