Geek Answers Handbook

Bold text to highlight a space in bold

I use CSS to style some radio buttons as tabs. I would like the "selected" font to be bold. Of course, this increases the size of the tab as the text takes up more space. I would like to find a way for the text to shift from bold to non-bold without changing the “tab”

Tab 1 selected

Tab 2 selected

Without setting a fixed width, is there a tricky and clean way to make text the size of a bold font without boldness?

The only method I can think of would be to have bold text (so that the text exists twice in 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 of 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; }
+6
source share
2 answers

There is also a solution using ghost elements. Just use the same bold text that is under the visible macaws:

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 jsFiddle to check it out!

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

+2
source

What about css letter-spacing ? The result will be near the desired:

 .tab { letter-spacing: 1.5px; } .tab.active, .tab:hover { letter-spacing: normal; }

Jsfiddle example

+1
source

More articles:


All Articles