A modern and fresh CSS underline generator. Underline code for your writing and design needs.
adjust underline parameters
underline width
underline alpha
e83600
css code snippet
text-decoration-line: underline;
text-decoration-style: "solid";
text-decoration-color: rgba(33,33,33,0.22);
text-decoration-thickness: 20px;
Using a fresh CSS underline works well for large text.
But a good CSS underline works just as well for small pieces of text, especially inline links that connote interactivity and hyperlinking.
About the CSS Underline
The text-decoration property is the CSS property that allows the creation customized underlines. It’s also possible to create a custom CSS underline using the border-bottom property.
Customized underlines have a longstanding history on the Internet. Of course, the standard monochromatic blue underline was originally created to connote hyperlinks to other websites. While this is still the main purpose, underlines have enjoyed a resurgence for decorative purposes as well.
Lastly, it is possible to add even more decorative elements to your underlines, such as dotted underlines, dashed underlines, and the like. While CSSBud doesn’t offer such an ability, we encourage you to explore them on your own!
Good uses for CSS Underlines
- Indication of hyperlinks
The indication of a link to another page or element is the main reason that custom CSS underlines are used. Oftentimes the brand and thickness used harken back to the parent brand of the page or screen. - Emphasis
Particularly in headlines, underlining for emphasis is an effective way to highlight inter-sentence words of importance. This is particularly popular in startup websites and communication decks. - Fun
With many trends moving away from the sterility of so-called “flat” design, the resurgence of expressivism has challenged designers for look for unexpected ways to inject fun and life into their work. Underlines can be just the tool for that.
