Place checkboxes on a horizontal rule with HTML/CSS

I am trying to create a web-based rating scale with seven checkboxes, two text labels and a horizontal rule in the background. It should look similar to a paper-based rating scale. In addition, I would like to mark the middle checkbox by a short vertical rule.

Because checkboxes seem to be quite difficult to style, I replaced them by a text symbol and a border in the labels. I manually positioned these checkboxes and the vertical rule on the horizontal rule. The result looks ok in Firefox but it doesn't seem to work for other browsers. In Chrome, IE and Edge, the vertical line is not placed in the center of the scale. Additionally, the checkbox symbol is not centered in Chrome.

Is there a better way to do this?

https://jsfiddle.net/tzuyya36/1/

HTML

<form>
  <div class="scale">
    <hr class="horizontal">
    <hr class="vertical">
    <div class="leftLabel">low</div>
    <input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
    <input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
    <input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
    <input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
    <input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
    <input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
    <input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
    <div class="rightLabel">high</div>
  </div>
</form>

CSS

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  font: 12px/16px sans-serif;
  text-align: center;
  vertical-align: middle;
  content: "\00a0";
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  position: absolute;
  border: 2px solid #8b8d8e;
  background: #ffffff;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
  display: inline-block;
}

input[type="radio"]:checked+label:before {
  content: "\26ab";
}

label.scale1 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: -8px;
}

label.scale2 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 82px;
}

label.scale3 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 172px;
}

label.scale4 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 262px;
}

label.scale5 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 352px;
}

label.scale6 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 442px;
}

label.scale7 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 532px;
}

div.scale {
  margin: 20px auto;
  width: 540px;
  height: 16px;
  position: relative;
}

div.leftLabel {
  text-align: right;
  width: 100px;
  position: absolute;
  left: -120px;
}

div.rightLabel {
  text-align: left;
  width: 100px;
  position: absolute;
  left: 560px;
}

hr.horizontal {
  width: 100%;
  position: absolute;
  border: 2px solid #8b8d8e;
}

hr.vertical {
  width: 30px;
  position: absolute;
  left: 257px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  border: 2px solid #8b8d8e;
}