Jump to content

How do I change the style of the links?


Il Domandatore
 Share

Recommended Posts

On the website there is this code;

a, a: focus {
     text-decoration: none;
}

The link is underlined and on hover it does not. It fits me well, but shouldn't it be hover?

I tried to put links, hover and visited, but I could not get the desired results.

I wanted the link underlined and the underline disappeared on hover. An underline with dots for visited links.

Link to comment
Share on other sites

Your current selector is removing the underline for all links, whether or not they are hovered. If you only want it removed on hover then change the selector to only target hovered links.

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

 

Link to comment
Share on other sites

Unless your page has other CSS rules which are overriding it, the code I provided meets these requirements:

  • Links are underlined.
  • Hovered links are not underlined.

I didn't see the visited links requirement, but it's not going to be possible. For privacy reasons, styling for visited links is restricted to certain properties (Read more). You can set the color of a visited link, but cannot change the underline or border style, which is inherited from normal link styles.

 

Link to comment
Share on other sites

If you intend to use the border in order to give the underline a different color then you will have to use only border properties and remove the text decoration because the underline given by the text-decoration property is always the same as the text . 

a {
  text-decoration: none;
  border-bottom: 1px solid;
}
a:visited {
  border-color: #3b633b;
}
a:hover {
  border-bottom: none;
}
  • Thanks 1
Link to comment
Share on other sites

If the link is a block element then the border cannot be used as an underline.

The only way to work around the problem on your website is to put all of the block styling, such as padding and borders, on the parent element of the link and make sure that the link is an inline element.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...