Change of font-weight to bold without changing width of element

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.one {<!--from   w w  w  .  j  av a  2s  . co m-->
   margin:0;
   padding:0;
   list-style:none;
   overflow:hidden;
}

.one li {
   float:left;
}

.one li:hover a {
   visibility:hidden;
}

.one li:hover:before {
   position:absolute;
   font-weight:bold;
   content:attr(data-text);
}

.two {
   margin:0;
   padding:0;
   list-style:none;
}

.two li {
   float:left;
}

.two li a span.b {
   visibility:hidden;
   font-weight:bold;
}

.two li a span.a {
   position:absolute;
}

.two li:hover a span.b {
   visibility:visible;
}

.two li:hover a span.a {
   visibility:hidden;
}
</style> 
 </head> 
 <body> 
  <ul class="one"> 
   <li data-text="one"> <a href="#">Lor</a> </li> 
   <li data-text="two"> <a href="#">Lor</a> </li> 
   <li data-text="three"> <a href="#">Lorem</a> </li> 
  </ul> 
  <ul class="two"> 
   <li> <a href="#"> <span class="a">Lor</span> <span class="b">Lor</span> </a> </li> 
   <li> <a href="#"> <span class="a">Lor</span> <span class="b">Lor</span> </a> </li> 
   <li> <a href="#"> <span class="a">Lorem</span> <span class="b">Lorem</span> </a> </li> 
  </ul>  
 </body>
</html>

Change of font-weight to bold without changing width of element - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials