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

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    How to handle CSS code in my Android email app?

    How to dynamically change the color of the selected menu item of a web page?

    HTML, CSS: How to override settings from *{}(!important is not working) [closed]

    How to include css from resources folder in symfony 2

    How can you prevent Formsauthentication to block css and images?

    how to remove elements in document fragment after append

    How to change the background colour's opacity in CSS [duplicate]

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    How to handle CSS with meteor?

    How to add new property within existing css?

    How to make content of invisible except for the left column?

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    How do i change the styling of a nodes CSS through javascript(d3)

    How do I force an image to be responsive using CSS so it stays in the same position?

    How to change extjs grid single cell background color depending on value changes?

    How to add javascript expression's output to my CSS?

    CSS how to transition(with transform) a parent and child both, differently

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    How to add a color overlay to a background image?

    How to change table cell colour to default on triple click html5/javascript/css

    How do customize option box that pops up when selectbox is clicked (iOS, HTML, CSS)

    Bootstrap glyphicon/nav bar showing popup window

    How can we make responsive height of header

    How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?

    what is jquery CSS frame work and how to use the frame work for giving look and feel to the website? [closed]

    How to avoid IE11 “slow” evaluation of CSS :invalid and :valid pseudo selectors

    gulp-cssmin: How to change relative URLs in minified CSS

    How can I make my wrapper
    vertically centered and responsive?

    How to create triple div border in CSS