Google Plus Facebook Twitter RSS YouTube

Styling Anchor Tag to show underline for Mouseover

Maintaining uniqueness all over the web template is primary challenging task for professional web designers because a uniform web template attracts the universe quickly and also raises interest in them to spend more time on website. In order to maintain balance in web template design, web professionals follow several techniques. Disabling the underlines of anchor tags but enabling them when people mouseover on hyperlinks. It is a commonly used technique in professional web theme designing.

Anchor Tag text effect for mouseover

Anchor text's tags get quick recognizing from visitors because of its different color compared to text color and underline at anchor text's bottom. More anchor tags in web pages minimize the presence or importance of content, raises curiosity in visitors to go through the links due to domination of anchor tags' styling. Modern web designing features help professional web designers to control the domination of hyperlinks and also to maintain a clear uniform structure all over the web template.

Output in Web Browser

Hypertext Markup Language displays hyperlinks in content with underline at bottom of anchor tag’s text. This type of default styling is not suitable to majority of websites.

Disabling underline from Anchor Text

Underline from anchor text can be disabled by applying CSS text-decoration property to anchor tag.

CSS Code

a{text-decoration:none;}

Setting text-decoration property of anchor tag to none disables underline from anchor text and neatly shows the anchor tags with given color in content.

Output in Web Browser

It looks good in web browser and also looks fine even for mouse hover. Some professional web designers interested not to show underline for both anchor tag's direct presence and mouse hover.

However, remaining web designers add a mouse hover effect to anchor tags to increase the curiosity in people by showing underline in anchor text at bottom when site visitors mouseover on anchor tags' text.

Enabling underline for Mouse Hover

Once again, css text-decoration property has to apply to anchor tag but this time the value has to be set to underline.

CSS Code

a{text-decoration:none;}
a:hover{text-decoration:underline;}

Keeping anchor tag's text decoration value to none shows anchor tags without underline in web browser but setting text decoration property's value to underline in anchor tag's hover syntax displays hyperlink with underline at bottom of anchor text when web page viewer mouse hover on anchor text.

Output in Web Browser

It is a widely used technique in professional CSS web template designing. Even we are using it in our website. It balances the site designing from top to bottom and increases the curiosity in site visitors to go through the suggested hyperlinks because of mouse hover effect. Add either of above CSS codes to your site's stylesheet or styling section to get same effect.

Follow Us
Google Plus Facebook Twitter RSS YouTube
Subscribe via Email
Save or Share This Web Design Tutorial with Your Friends
Save or Share This Web Design Tutorial

Related Topics

Changing link color from Blue to other colorHow to Change color of HTML anchor tag’s text link color from blue to any web color using CSS styling system