New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Crazy CSS Underline Effects

Check out these crazy CSS underline effects:

Double Underline Effects! (via u.double class)

Alternate Double Underline! (via .altdouble class)

Triple Underline Effects! (via u.triple class)

CSS Code

Here is the CSS corresponding to each of the previous examples.

/* -- double underline -- */
u.double {
	border-bottom: 1px solid;
}

/* alternate double */
.altdouble {
	border-bottom: 3px double;
	line-height: 1.7em;
}

/* -- triple threat -- */
u.triple {
	border-bottom: 3px double;
	line-height: 1.9em;
}

Screenshot

if these examples do not display correctly with the site’s current design, check out the following screenshot to get a better idea:

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
WP Themes In Depth: Deep dive into WP theme development.

7 responses to “Crazy CSS Underline Effects”

  1. Thanks for that. I like how it is a nice simple way to do it.

  2. Is a bad hack, because is engine rendering dependant. will show different on different engines.

    On Gnome:
    “Double Underline Effects”, shows has a double width line.

    “Alternate Double Underline” shows has a double underline

    “Triple Underline Effects” shows has a double underline, with the first one of double width.

  3. Jeff Starr
    Perishable 2007/07/15 9:20 am

    Tei,

    Hi, thank you for the comment. A few points:

    1. The CSS code presented is this article is completely legitimate and validates 100% according to the W3C CSS Validation Service. — No hacks here, man!

    2. All rendering of CSS happens in the user’s browsing device, and therefore is dependent not only on the browser, but also on the operating system, plugins, fonts, etc. To say that it “is engine rendering dependant” is stating the obvious and does not support your claim that it “Is a bad hack,” which is false anyway (see point #1).

    3. You then continue with several descriptions of the CSS as it renders on “Gnome.” What? The last time I checked, Gnome was an operating system for Linux, not a browsing device. The CSS code in this article renders fine in a majority of browsers on a majority of operating systems. As with any CSS, it is always possible to find at least one setup that does not display the CSS as intended. That’s just the name of the game. It sucks, I know, but nobody can test every browser on every operating system.

    I appreciate you taking the time to leave a comment, Tei, but feel inclined to emphasize the importance of research and understanding as it applies to the fine art of sharing your opinion.

  4. great!!! thanks i’ll apply this on my site soon….

    thanks from patagonia land…

  5. Jeff Starr
    Perishable 2007/12/05 2:46 pm

    Thanks, ale baur — I hope to visit there someday ;)

  6. Lukasz - LJ WEb 2008/04/17 11:50 am

    nice and simple – thanks for that ;)

  7. Jeff Starr
    Perishable 2008/04/20 7:28 am

    Sure thing, Lukasz — happy to help!

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
Book updates complete! DigWP, .htaccess, Tao-WP, and WP Themes books all updated and current with all the latest.
Stop giving so much juice to social media. Get a site and OWN your content.
I would give my left testicle for macOS Finder to remember column widths.
The chemical name for titin (the largest known protein) has 189,819 characters and takes several hours to pronounce.
Working on book updates, should be available for download sometime next week.
iCloud is like the Terminator. It will never stop trying to get your data. An endless fight on each Apple device to keep iCloud disabled and empty.
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.