Non-bold text to take the space of bold text [duplicate]

Question

I am using CSS to style some radio buttons as tabs. I would like the "selected" tab's font-weight to be bold. Of course, this causes the size of the tab to increase, as the text takes up more space. I would like to find a way to have the text go from bold to non-bold without the "tab" changing size

Short of setting a fixed width, is there a crafty and clean way of making the text take up the size of bold text without it actually being bold?

The only method I can think of would be to have the bold text exist (causing the text to exist twice in the HTML), but with visibility: hidden.

Markup:

<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>

Relevant CSS as it is now:

.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

There is also a solution using ghost elements. Simply use the same text with a bold style, which lies underneath the visible ares:

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;
}

Here is a jsFiddle to check it out!

The only caveat is that the visible text is not centered within the outer div. Maybe someone can pick up from here?!