css - Non-bold text to take the space of bold text -

css - Non-bold text to take the space of bold text -

this question has reply here:

inline elements shifting when made bold on hover 16 answers

i using css style radio buttons tabs. "selected" tab's font-weight bold. of course, causes size of tab increase, text takes more space. find way have text go bold non-bold without "tab" changing size

short of setting fixed width, there crafty , clean way of making text take size of bold text without beingness bold?

the method can think of have bold text exist (causing text exist twice in html), 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 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; }

there solution using ghost elements. utilize same text bold style, lies underneath 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 jsfiddle check out!

the caveat visible text not centered within outer div. maybe can pick here?!

css css3