BrowseLab Products Demos Support Company Download Pricing
Contents
:
Search:

Home > HelpConsole 6 > How to Style Anchor Links Differently

How to Style Anchor Links Differently

You can style anchor links separately from regular links (as well as the anchor targets) by selecting <a> elements with specific attributes. An <a> element with the attribute 'name', or an <a> element with the attribute 'href' beginning with '#' (like an anchor) can be styled differently than a regular <a> element.

Here's what the CSS looks like:

a {text-decoration: underline!important;}
a[href^="#"] {text-decoration:none!important; font-weight: bold;}
a[name] {color: purple; text-decoration:none!important;}

- The first declaration targets all links on the page and gives them an underline.

- The second declaration targets all links on the page with href values beginning with '#'.

- The third declaration targets all links on the page with the 'name' attribute.

Here's what the HTML looks like:

<a href="#One">Anchor Link</a>
...
<a href="http://www.website.com">Regular Link</a>
...
<a name="One">Anchor Target</a>

- The first link is an anchor to the target (third link). Notice the href value begins with '#'.

- The second link is a regular link.

- The last link is an anchor target. Notice there is no href attribute, only a 'name' attribute.

Here's what the output looks like:

 
If you want to add the above CSS to a project to style all anchor links like this, make sure to add another selector before the 'a' to only target links in help pages. It will look like this:
.page_body a {text-decoration: underline!important;}

.page_body a[href^="#"] {text-decoration:none!important; font-weight: bold;}

.page_body a[name] {color: purple; text-decoration:none!important;}

Add the above to the project styles by going to Tools > Styles and pasting it into the PageStyles tab.

Related Pages:

Adding Page Anchors

Properties
Article ID:
how_to_style_anchor_links_differently_from_regular_links
Views: 547
Created By: admin
Modified By: admin
Created Date: 7/19/2016 3:33 PM
Last Modified: 7/19/2016 3:40 PM
Actions
Print This Article
Bookmark
Email This Article
Previous Article
Next Article

Was this page helpful?YesNo