Danny '365CSI' Engelman 's answer code is very useful, but there are some minor problems , it text overflow hidden when the country area is too small. Here are some modifications :

// ...
   labelPath(path){
      path.setAttribute("fill","none");
      path.setAttribute("stroke","black");
      let { x, y, width, height } = path.getBBox();
      let title   = path.getAttribute("title");

      // min width 50

      if (width < 50) {
          x = x - (50 - width) / 2
          width = 50
      }
      let xoffset = ~~(path.getAttribute("x") || 0);
      let yoffset = ~~(path.getAttribute("y") || 1);

      // you can set custom offset ...

      let id   = "p" + Math.random() * 1e18; // create a unique id
      let line = `<path id="${id}" 
                        d="m${x+xoffset} ${y+yoffset+height/2}h${width}" stroke="red"/>`;
      this.svg.insertAdjacentHTML("beforeend", line + `
        <text style="font-size: 15px">
        <textPath startoffset="50%" text-anchor="middle" 
                  dominant-baseline="middle" href="#${id}">
          ${title}</textPath>
        </text>`);
  }
// ...

Since I don't have 50 reputation, I can't comment on him anwser :)