How to add decoration to link in CSS?


Tags: css

Problem :

I have the following which works:

#s5_bottom_menu_wrap a{
color:#333333 !important;
}

And I want to be able to add the following to it:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

However, when I do this:

#s5_bottom_menu_wrap a{
color:#333333 !important;
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}
}

... in Google Chrome's Inspect Element it shows an error "Unknown property name" for the added CSS, and it doesn't have any effect. What I'm trying to do, is do what the designed wants which is to have these Nav links have no decoration and underline the link on hover only.

What am I doing wrong? How should these text-decorations be added?

I have already tried this based on the answers I got here, is this correct?

/* bottom section Nav links in footer */
#s5_bottom_menu_wrap a{ color:#333333 !important; text-decoration:none;}
#s5_bottom_menu_wrap a:link {text-decoration:none;}
#s5_bottom_menu_wrap a:visited {text-decoration:none;}
#s5_bottom_menu_wrap a:hover {text-decoration:underline;}
#s5_bottom_menu_wrap a:active {text-decoration:none;}


Solution :

You are adding the styles to :link, :visited, :hover and :active inside the css styling block for the a element. That will not work. Instead try the following

#s5_bottom_menu_wrap a{ color:#333333 !important; text-decoration:none; }

#s5_bottom_menu_wrap a:hover {text-decoration:underline;}


    CSS Howto..

    CSS - How to Draw a Multi-Coloured Line?

    How to display mouseover effect in GridView rows using only CSS?

    CSS Ribbon - How to make a transparent triangle while disregarding background

    How to reverse a CSS animation on unchecked state?

    How do I float 3 elements right above each other and one left?

    how to print no blur content over a blurred div

    Adding css resource to a QuickTip in ExtJS not showing

    How to figure out if CSS transition is about to happen?

    How to replace direct image calling with sprites, in JavaScript?

    How to define separate fonts for each font-style - CSS

    Show or hide button text responsively in jQuery Mobile

    How to add padding and border that doesn't change width if using 960 grid system

    How to indicate that an LI with a link was pressed.

    css in firefox and ie is rendering old css file…chrome shows new css just fine

    How to use JavaScript to Alter CSS for Multiple Elements

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    div shown with jquery is cropped

    How to create a table inner bevel in HTML/CSS?

    How do i add a background image to my header?

    How to add colour classes to this css

    how to relocation dropdownmenu by CSS

    How to center horizontally a div within an li in CSS

    How Do I Make Validation and Error Messages Come Up Using Javascript?

    How To Prevent Transition Animation To Run Page Load

    How to give an element with an id a certain CSS property if it has a class?

    How to push down absolute positioned div with CSS

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    How do I isolate an image from the html so that I can edit where it goes on the website?

    How can I access CSS selectors programmatically? [closed]