Non-bold text to take the space of bold text

css

Solution

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

Problem

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

Original source

Related problems