How to insert arrows in html?

I was reading an article and just wonder how the arrows as shown in the picture below are inserted. I viewed the html source and there was nothing th开发者_Go百科ere.

How to insert arrows just like that?

---

They are background-images.

#content .bodytext a.external { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }

---

They are using this CSS

#content .bodytext a.external {
    background: url("/img/extlink.gif") no-repeat scroll right top transparent;
    padding-right: 7px;
}

And the link is this

<a href="http://www.informationweek.com/news/windows/operatingsystems/showArticle.jhtml?articleID=208800494" target="_blank" rel="nofollow" class="external">http://www.informationweek.c<wbr></wbr>om/news/windows/operatingsys<wbr></wbr>tems/showArticle.jhtml?articleID=208800494</a>

The CSS is to find an element with id="content". Then find it's children with class="bodytext". Now for each child find anchor tag with class="external" and apply the background image to it.

---

They are set using CSS background images and classes on the elements.

For example the grey arrow for external links is associated with the class external on anchors. You should be able to check the other arrows by inspecting the elements using the developer tools in your browser e.g. FireBug in FireFox.

---

In relation to above link from Duniyadnd - which I found very interesting, a quick solution for internal links could be:

a[href*="here"] { padding-right: 7px; background: transparent url(/img/intlink.gif) no-repeat top right; }

What the above code does is look for any links with the word 'here' in them and then stick an arrow indicating 'internal'. That would of course mean you would have to refer to all internal links as 'here', or run up a couple more rules. You could then change the rule to suit external links as well:

a[href ^='http'] { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }

---

It's an image, styled that way with css. As you can see the hyperlink has a class='external' and class='internal'

http://forums.whirlpool.net.au//img/exteml.gif

http://forums.whirlpool.net.au//img/extlink.gif

#content .bodytext a.internal { padding-right: 7px; background: transparent url(/img/intlink.gif) no-repeat top right; }
#content .bodytext a.internal,
#content .bodytext a.internal:link,
#content .bodytext a.internal:active,
#content .bodytext a.internal:visited { color: #730; text-decoration: none; }
#content .bodytext a.internal:hover { color: #A50; text-decoration: underline; }
#content .bodytext a.internal img { display: none; }

/* inter-links */
#content .bodytext a.external { padding-right: 7px; background: transparent url(/img/extlink.gif) no-repeat top right; }
#content .bodytext a.external img { display: none; }

/* inter-links */
#content .bodytext a.email { padding-right: 7px; background: transparent url(/img/exteml.gif) no-repeat top right; }
#content .bodytext a.email img { display: none; }