Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Add An Animated Sliding Underline To Your Text Or Headings

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add An Animated Sliding Underline To Your Text Or Headings

Add An Animated Sliding Underline To Your Text Or Headings

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


Today’s featured tutorial is by Paul Crowe from SpiceUpYourBlog. It’s nothing fancy in terms of functionality but if you want to make your blog look completely different and refreshing then try his trick out.

The trick is simply to add a sliding line underneath your text; it could be your blog’s body text or headings. This sliding line will appear or rather slide out underneath the (tagged) text every time the mouse pointer is hovered over it. Crowe says that this would be ideal for links and post headings as they’re the ones that get hovered over by the mouse the most.

The trick is pretty easy to implement as the tutorial instruction doesn’t require any solid coding knowledge or experience to follow. All it takes is for you to add a CSS code into your template’s HTML. Below is just a portion of the CSS.

/* Underline Slide */
.uslide {
display: inline-block;
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
.uslide:hover:after {
width: 100%;
background: #990000;

If you’d like to see the complete set and find out how to go about it and where should you put it, click here.

Liked It ? Please Share


5 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Joly George says:

    great tip for new bloggers like me. It will be very useful to me to improve my blogging profession…. Keep continuing sharing new ideas…… FREE PROFESSIONAL BLOGGING TIPS

  2. OMIT HASAN says:

    We were unable to save your template.

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message:
    Content is not allowed in prolog.

  3. I love your tutorials.

  4. Tamera says:

    It’s hard to find your articles in google. I found it on 18 spot, you should
    build quality backlinks , it will help you to get more visitors.

    I know how to help you, just type in google – k2 seo tricks

  5. Sadye says:

    I read a lot of interesting content here. Probably you spend a lot
    of time writing, i know how to save you a lot of work, there is an online tool
    that creates high quality, google friendly
    posts in seconds, just type in google – k2seotips unlimited content

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here