Links in CSS

Links can be added using "a" tag. href attribute can be used to specify linked document and target attribute can be used to specify in which window/iframe/tab the new document should be opened.

Styling links

By default, each a tag has below styles applied by user agent stylesheet(browser).

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
e.g. To apply custom style like prev and next buttons displayed on this page, you can use css like below.

text-decoration: none;
display: block;
background-color: var(--primaryColor);
color: var(--secondaryColor);
padding: 10px;
border-radius: 5px;

a tag states

Links can be in below states.
  • :active
  • :focus
  • :visited
  • :focus-visible
  • :hover
  • :target
  • focus-within
You can force these states in chrome developer tools to see how to link will look like in specific state.

Web development and Automation testing

solutions delivered!!