非粗体文本占用粗体文本的空间

Question

我使用CSS来设置一些单选按钮作为选项卡.我希望"选中"标签的font-weight为粗体.当然,这会导致选项卡的大小增加,因为文本占用更多空间.我想找到一种方法让文本从粗体变为非粗体而不改变"标签"

如果没有设置一个固定的宽度,是否有一种狡猾而干净的方式使文本占用粗体文本的大小而不实际是粗体？

我能想到的唯一方法是使粗体文本存在(导致文本在HTML中存在两次),但是visibility: hidden.

标记:

<label class="tab active"><input type="radio" name="someTabs" value="someValueA" />Tab 1</label>
<label class="tab"><input type="radio" name="someTabs" value="someValueB" />Tab 2 (with longer text)</label>

现在的相关CSS:

.tab {
  display: block;
  font-size: 1.2em;
  height: 2em;
  line-height: 2em;
  margin-right: 1px;
  padding: 0 2em;
  position: relative;
  text-align: center;
  float: left;
}
.tab.active,
.tab:hover {
  font-weight: bold;
}
.tab input[type=radio] {
  display: none;
}

Answer 1

还有一种使用幽灵元素的解决方案。只需使用位于可见区域下方的粗体样式的相同文本即可：

HTML：

<div class="link">
    <div class="text">Sample Text</div>
    <div class="ghost">Sample Text</div>
</div>

CSS：

.link {
    border: 1px #000 solid;
    display: inline-block;
}

.link .ghost {
    color: transparent;
    font-weight: bold;
}

.link .text {
    position: absolute;
    text-align: center;
}

.link .text:hover {
    font-weight: bold;
}

这里有一个jsFiddle来看看！

唯一需要注意的是可见文本不在外部 div 的中心。也许有人可以从这里接人？！