Animated underline on multiple lines text
We have already seen a thick underline effect on text. Taking this to the next step is animating the underline effect and still looking good when text span over multiple lines.
Text
Text in thick 3D look effect
Want to make a word stand out in your website layout? Well, a thick 3D look text effect might do the trick for you.
Add floating text next to link or button
Floating text next to a link or button can be a good way to show additional information about a specific link or button. Also, it helps catch more user attention to that specific link or button.
Different color bullets or numbers in the list
By default, li list items will show same color bullets (when using un-ordered list ul) and same color numbers (when using ordered list ol). You can easily color to these by targeting marker pseudo element.
Lines before and after headline text
Adding line before and after text is a classic CSS effect. However, defining size of these before and after lines can be challenge which can be easily dealt with by using grid columns for dynamic widths.
Big number cut off effect with slash line
Making a big number cut off with a line effect done with CSS only. Now, this effect looks cool but it also has its limitations. Please Note: You would need to adjust the code for cut off line positioning depending on the font size, font type in the use.
Use background image on text instead of color
Besides using fancy gradient in place of the usual text color, you can go to the next level by using background image for even more fanciness.
Add gradient to text with multiple colors
We just saw how to use gradient as border for images and make them look fancy. Similarly, multi color gradient effect can be applied to the normal text (looks good specially on headlines).
Animated multiple words in a headline
Using animation to circle through various words within a headline can be achieved with CSS only. It is ideal for a headline where you want to convey multiple benefits by circling through different words.
Thick underline effect with background color
Underline is normally used for clickable or linked text. These days underline effect is also used to highlighted normal text words in a headline. For accessibility reasons, such text should be highlighted using background color method as against normal underline or fancy wavy underline effect.