Tachyons toolkit is used to make a responsive website. In this article, we will learn how to decorate text using the CSS toolkit named Tachyons.
Tachyons Typography Text Decoration is used to decorate text with underlines. It can also remove the default underlines browsers put on links.
Tachyons Typography Text Decoration Classes:
- no-underline: This class is used to provide no underline or no decoration to a text.
- underline: This class is used to provide lines under the text.
- strike: This class is used to provide a line on the text that seems like someone has cut the word in the horizontal direction.
Syntax:
<element-name class="class-name">
...
</element-name>Example 1: Below example demonstrates the Tachyons Typography Text Decoration using no-underline and underline classes.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="green">
GeeksforGeeks
</h1>
<h4>
No Underline
</h4>
<p class="no-underline">
A computer science portal for geeks
</p>
<h4 class="underline">
Underline
</h4>
<p class="underline">
A computer science portal for geeks
</p>
</center>
</body>
</html>
|
Output:
Example 2: Below example demonstrates the Tachyons Typography Text Decoration using strike and underline classes.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="green">
GeeksforGeeks
</h1>
<h4>
Strike:
</h4>
<p class="strike">
A gamming portal.
</p>
<p class="underline">
A computer science portal for geeks
</p>
</center>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/typography/text-decoration/