«
»

Arrow image after external links – CSS tweak

September 17th, 2013

Here’s a little CSS tweak to have a custom image, like this shown directly after any external links in a list. By external, I mean they begin with http even though you could argue that internal links with a full absolute URL also could begin with that as well.

There are quite a few solutions similar to this but I found none with images, only text content.
Click on the download link for a demo.

?Download iconafter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<html>
<head>
<title>Icon after external links</title>
<style type="text/css">
/* Some basic demo purpose styles */
body,p { font-family: Arial; font-size: 0.9em; margin: 0; }
ul.linklist { width: 180px; list-style-type: none; border: 1px solid #000; margin: 20px; padding-left: 10px; }
ul.linklist li { padding: 5px; }
ul.linklist a { display: block; text-decoration: none; color: #086ABF; }
ul.linklist a:hover { text-decoration: underline; }
 
/* Here's the arrow css */
ul.linklist a[href^="http"] .arrow 
{
    width: 13px; /* arrow image width */
    height: 12px; /* arrow image height */
    top: 1px;
    left: 5px;
    position: relative;
    display: inline-block;
    background: transparent url("http://shahinalborz.se/wp-content/uploads/2013/09/arrow-external.png") no-repeat;
}
</style>
</head>
<body>
<ul class="linklist">
    <li>
        <a href="http://www.external.com/">External 1<span class="arrow"></span></a>
        <p>Lorem ipsum dolor sit amet lorem ipsum</p>
    </li>
    <li>
        <a href="http://another.external.com">External 2<span class="arrow"></span></a>
        <p>Lorem ipsum dolor sit amet</p>
    </li>
    <li>
        <a href="iconafter.html">Internal<span class="arrow"></span></a>
        <p>Lorem ipsum dolor sit amet</p>
    </li>
</ul>
</body>
</html>

This entry was posted on Tuesday, September 17th, 2013 and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply