Symbolize link target with CSS2
Who doesn’t know the idea of a little icon in front of a hyperlink to show where it goes to? I thought by using an attribute dependenp syntax in my css it should be quite easy. And it is:
<style media="screen" type="text/css">
div.example a {
padding-left:35px;
background-repeat:no-repeat;
background-position:left;
height:20px;
}
div.example a[target=_self] {
color:red;
background-image:url(wp-content/css2_link/icon_samewindow.gif);
}
div.example a[target=_blank] {
color:green;
background-image:url(wp-content/css2_link/icon_newwindow.gif);
}
</style>
<a target="_self" href="http://www.j2h.info/blog/">Link with target self</a>
<a target="_blank" href="http://www.j2h.info/blog/">Link with target blank</a>
But though it is CSS2 and of course not every browser has implemented that syntax, what a miracle - it doesn’t work in IE. So my little hack goes direct into the trash bin because until IE will support all the CSS2 features the link target should be part of CSS at all.
Who doesn’t know the idea of a little icon in front of a hyperlink to show where it goes to? I thought by using an attribute dependenp syntax in my css it should be quite easy. And it is:
<style media="screen" type="text/css">
div.example a {
padding-left:35px;
background-repeat:no-repeat;
background-position:left;
height:20px;
}
div.example a[target=_self] {
color:red;
background-image:url(wp-content/css2_link/icon_samewindow.gif);
}
div.example a[target=_blank] {
color:green;
background-image:url(wp-content/css2_link/icon_newwindow.gif);
}
</style>
<a target="_self" href="http://www.j2h.info/blog/">Link with target self</a>
<a target="_blank" href="http://www.j2h.info/blog/">Link with target blank</a>
But though it is CSS2 and of course not every browser has implemented that syntax, what a miracle - it doesn’t work in IE. So my little hack goes direct into the trash bin because until IE will support all the CSS2 features the link target should be part of CSS at all.