Category: CSS

Related to my earlier post, here’s another method you can use in your next project ;).

How it works, basically the CSS create a copy from the text inside <a> tag, and copy the data-content attributes and add it before the the text inside <a> the difference is the copied element has a bold text.

Usually, if you have a navigation menu with “bold” on hover effect, it will shift another menus. To be clear check out the example below:

See the another elements are slightly shifting as you hover one menu. To solve the issue, we can give static width to the list, but how if we want to keep it dynamic?

Take a look at the sample below:

Yes, I utilize the text-shadow to make the font looks bold, without affecting another elements.

[css]
text-shadow: 0 0.015em #101010,0 -0.015em #101010,0.01em 0 #101010,-0.01em 0 #101010;
[/css]

Let me know if you have any thought or even another solution.

Update on safari:

(29/03/17)
Here’s the working method for Safari and Webkit browsers:

-webkit-text-fill-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;