What is CSS underline?
CSS underline is a style applied to text to draw a line under the text. It is used to emphasize text and highlight important text in the content.
How to use CSS Underline Generator?
CSS Underline Generator is a simple tool to generate CSS code and Tailwind Class for underlining text. You can easily customize the underline style, color, thickness, and offset using the options provided in the tool.
Here are the feature of CSS Underline Generator:
Underline style
You can select underline style from the dropdown. There are 5 underline styles available: solid, dashed, dotted, double, and wavy.
Underline color
You can select underline color from the color picker. You can choose any color for the underline.
Underline thickness
You can select underline thickness from the range slider. You can choose the thickness of the underline.
Auto thickness is also available. You can select auto thickness to set the thickness of the underline automatically.
Thickness from font size option is also available. You can select this and the thickness of the underline will be the same as the font.
Underline offset
You can select underline offset from the range slider. You can choose the offset of the underline.
Offset means the distance between the text and the underline. You can set the offset of the underline in positive or negative values. Positive values will move the underline below the text and negative values will move the underline above the text.
Auto offset is also available. You can select auto offset to set the offset of the underline automatically.
About CSS Underline
The text-decoration property in CSS is used to underline text. This property allow us to underline text with different styles like solid, dashed, dotted, double, and wavy.
Underline is used to emphasize text. It is used to highlight important text in the content. It is also used to show links in the content.
In CSS, you can underline text using the text-decoration property. You can set the text-decoration property to underline to underline text.
Here is an example of underlining text using the text-decoration
<style>
.underline {
text-decoration-line: underline;
text-decoration-color: blue;
text-decoration-style: solid;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
</style>
In the above example, we have used the text-decoration-line property to underline text. We have set the text-decoration-color to blue, text-decoration-style to solid, text-decoration-thickness to 2px, and text-underline-offset to 5px.
FAQs
How to underline text in CSS?
You can underline text in CSS using the text-decoration property. You can set the text-decoration property to underline to underline text.
Does this tool generate tailwindcss (tailwind class) code for underlining text?
Yes, this tool generates tailwindcss code for underlining text. You can copy the tailwindcss code and use it in your project.