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 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.
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.
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.
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.
