CSS: bolding some text without changing its container’s size

by

I had the same problem, but got a similar effect with a little compromise, I used text-shadow instead. 

li:hover {text-shadow:0px 0px 1px black;}

Here’s a working example:

body {
  font-family: segoe ui;
}

ul li {
  display: inline-block;
  border-left: 1px solid silver;
  padding: 5px
}

.textshadow :hover {
  text-shadow: 0px 0px 1px black;
}

.textshadow-alt :hover {
  text-shadow: 1px 0px 0px black;
}

.bold :hover {
  font-weight: bold;
}
<ul class="textshadow">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>text-shadow: 0px 0px 1px black;</code></li>
</ul>

<ul class="textshadow-alt">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>text-shadow: 1px 0px 0px black;</code></li>
</ul>

<ul class="bold">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>font-weight: bold;</code></li>
</ul>

jsfiddle example

More Related Contents:

  1. Are eot, ttf, and svg still necessary in the font-face declaration?
  2. Same font except its weight seems different on different browsers
  3. Browsers’ default CSS stylesheets
  4. CSS Font Border?
  5. Wait for fonts to load before rendering web page
  6. What does the forward slash mean in the CSS font shorthand?
  7. Why should we include ttf, eot, woff, svg,… in a font-face
  8. Is there any “font smoothing” in Google Chrome?
  9. Failed to decode downloaded font
  10. Create webfont with Unicode Supplementary Multilingual Plane symbols
  11. How to import fonts in CSS?
  12. How is font size calculated?
  13. Converting and rendering web fonts to base64 – keep original look
  14. Font size in CSS – % or em? [duplicate]
  15. Multiple font-weights, one @font-face query
  16. Webfont Smoothing and Antialiasing in Firefox and Opera
  17. Webpack “OTS parsing error” loading fonts
  18. Force Non-Monospace Font into Fixed Width Using CSS
  19. Fonts looks different in Firefox and Chrome
  20. Fallback fonts on special characters
  21. Specifying Style and Weight for Google Fonts
  22. Why would font names need quotes?
  23. Styling Password Fields in CSS
  24. What does font-size really correspond to?
  25. Make text height 100% of div?
  26. Non-Standard fonts in web?
  27. Forcing anti-aliasing using css: Is this a myth?
  28. How do I style a specific word with CSS in an HTML element?
  29. How to add a custom font to Rails app?
  30. -webkit-font-smoothing property has no effect in Chrome

Leave a Comment