字体增大时文本偏移至自身下边框下方的原因排查

我在Codepen开发了一款标记覆盖（marker overlay）组件作为概念原型，移植到个人网站后出现文本定位问题：调整字体大小时，文本会偏移到自身下边框的下方（正常情况下不应出现此问题）。

在Codepen中组件显示正常，但个人网站里异常。已排查父元素定位未发现问题；尝试设置line-height:0，文本仅小幅上移；切换box-sizing: content-box有一定改善，结合line-height:0能达到预期效果，但修改字体大小后问题仍会重现。目前未找到其他干扰CSS，想了解该问题的原因。

组件代码 #

CSS代码

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

body {
  background-color: black;
  width: 100%;
  height: 100%;
  color: white;
  box-sizing: border-box;
}

.container {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 200px;

  width: 100%;
  height: 100vh;
}

.marker {
  --marker-size: 18px;
  --marker-dot-size: 5px;
  position: relative;
  width: var(--marker-size);
  height: var(--marker-size);
  border: 1px solid white;

  display: flex;
  justify-content: center;
  align-items: center;
}

.marker .markerdot {
  width: var(--marker-dot-size);
  height: var(--marker-dot-size);
  background-color: white;
  box-shadow: 0 0 1px 1px white;
  transition: all 0.2s ease-in-out;
}

.marker input[name="markers"] {
  appearance: none;
  visibility: hidden;
}

.marker .markerlabel {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.marker .title {
  --padding-bottom: 4px;
  --border-bottom-size: 1px;
  --abs-x: max(var(--marker-title-x), -1 * var(--marker-title-x));
  --abs-y: max(var(--marker-title-y), -1 * var(--marker-title-y));
  --abs-angle: max(
    var(--marker-title-line-angle),
    -1 * var(--marker-title-line-angle)
  );
  --text-height: calc(1rem + var(--padding-bottom) - var(--border-bottom-size));
  position: absolute;
  padding-bottom: var(--padding-bottom);
  border-bottom: var(--border-bottom-size) solid white;

  width: fit-content;

  text-wrap: nowrap;

  opacity: 0.75;
  transition: opacity 0.2s ease-in-out;

  &.title-top-right {
    transform: translate(var(--abs-x), calc(var(--abs-y) * -1));
  }

  &.title-top-left {
    transform: translate(calc(var(--abs-x) * -1), calc(var(--abs-y) * -1));
  }

  &.title-bottom-right {
    transform: translate(var(--abs-x), calc(var(--abs-y) - var(--text-height)));
  }

  &.title-bottom-left {
    transform: translate(
      calc(var(--abs-x) * -1),
      calc(var(--abs-y) - var(--text-height))
    );
  }
}

.marker {
  & .title-top-right::before {
    content: "";
    position: absolute;
    right: 100%;
    bottom: 0%;
    width: var(--title-line-length);
    border-top: 1px solid white;

    transform-origin: right center;
    transform: translatey(var(--border-bottom-size))
      rotate(calc(var(--abs-angle) * -1));
  }

  & .title-bottom-right::before {
    content: "";
    position: absolute;
    right: 100%;
    bottom: 0;
    width: var(--title-line-length);
    border-top: 1px solid white;

    transform-origin: right center;
    transform: translatey(var(--border-bottom-size)) rotate(var(--abs-angle));
  }

  & .title-bottom-left::before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: var(--title-line-length);
    border-top: 1px solid white;

    transform-origin: left center;
    transform: translatey(var(--border-bottom-size))
      rotate(calc(var(--abs-angle) * -1));
  }

  & .title-top-left::before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: var(--title-line-length);
    border-top: 1px solid white;

    transform-origin: left center;
    transform: translatey(var(--border-bottom-size)) rotate(var(--abs-angle));
  }
}

.marker:hover .markerdot {
  transform: scale(1.6);
  box-shadow: 0 0 1px 1.3px white;
}

.marker:has(input:checked),
.marker label.title:hover {
  opacity: 1;
  & .markerdot {
    transform: scale(1.6);
    box-shadow: 0 0 1px 1.3px white;
  }

  & label.title {
    opacity: 1;
  }
}

HTML代码

<div class="container">
  <div class="marker">
    <label for="marker1" class="title title-bottom-right" style="--marker-title-x: 250px; --marker-title-y: 95px; --marker-title-line-angle: 23deg; --title-line-length: 185px;">
      Your text here
    </label>
    <label class="markerlabel">
      <input id="marker1" type="radio" name="markers">
      <span class="markerdot"></span>
    </label>
  </div>

  <div class="marker">
    <label for="marker2" class="title title-bottom-left" style="--marker-title-x: 250px; --marker-title-y: 95px; --marker-title-line-angle: 23deg; --title-line-length: 185px;">
      Your text here
    </label>
    <label class="markerlabel">
      <input id="marker2" type="radio" name="markers">
      <span class="markerdot"></span>
    </label>
  </div>

  <div class="marker">
    <label for="marker3" class="title title-top-right" style="--marker-title-x: 250px; --marker-title-y: 95px; --marker-title-line-angle: 23deg; --title-line-length: 185px;">
      Your text here
    </label>
    <label class="markerlabel">
      <input id="marker3" type="radio" name="markers">
      <span class="markerdot"></span>
    </label>
  </div>

  <div class="marker">
    <label for="marker4" class="title title-top-left" style="--marker-title-x: 250px; --marker-title-y: 95px; --marker-title-line-angle: -23deg; --title-line-length: 185px;">
      Your text here
    </label>
    <label class="markerlabel">
      <input id="marker4" type="radio" name="markers">
      <span class="markerdot"></span>
    </label>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Nebue