External link icon on top of bg in sidebar

HTML & CSS
1

Hi,

I need to add an icon on my sidebar menu that shows which link is external.

I found this css code (http://www.csstemplatesweb.com/css-articles/how-to-style-external-links-with-css/):

a[href^="http:"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

But I am running into a problem, as my sidebar menu already has set background properties.

Is it possible to add a second bg on top of the first one?

Below is the code from my css:

.sidebar .widget ul, .sidebar .widget_categories ul {
	margin:0;
	background:url(../press/images/sidebar_list_line.gif) left top no-repeat;
	padding-top:2px;
	font-weight:normal}

.sidebar .widget ul ul a, .sidebar .widget_categories ul ul a {
	padding-left:70px;
	background:url(../press/images/ico_arrow_blue2.gif) 56px 12px no-repeat;}

.sidebar .widget ul ul a:hover, .sidebar .widget_categories ul ul a:hover {
	background:url(../press/images/sidebar_list_hover3.png) 0 0 no-repeat;}
	
.sidebar .widget li, .sidebar .widget_categories li {
	list-style:none;
	background:url(../press/images/sidebar_list_line.gif) left bottom no-repeat;
	padding-bottom:2px;
	margin:0}

.sidebar .widget li a, .sidebar .widget_categories li a {
	display:block;
	background:url(../press/images/ico_arrow_blue2.gif) 36px 12px no-repeat;
	padding:5px 5px 5px 50px}
	
.recentcomments a {
	background:none!important;
}

.recentcomments{
	padding:5px 20px 5px 30px;
}

.sidebar .widget li a:hover, .sidebar .widget_categories li a:hover {
	background:url(../press/images/sidebar_list_hover.png) 0 0 no-repeat;
	color:#023d67}

#sidebar_left .sidebar .widget_categories li a, #sidebar_left .sidebar .widget li a{
	background:url(../press/images/ico_arrow_blue2.gif) 16px 12px no-repeat;
	padding:5px 5px 5px 30px}

#sidebar_left .sidebar .widget_categories li a:hover, #sidebar_left .sidebar .widget li a:hover {
	background:url(../press/images/sidebar_list_hover2.png) 0 0 no-repeat;
	color:#023d67}

Thanks!

2

You could put a <span> inside those links and set styles for the spans for certain links. E.g.

a[href^="http:"] span {
  background: url(images/yourimage.gif) no-repeat 0 0;
}

You’ll need to experiment with the settings on that span, like giving is a height and width to match the dimensions of the background image, and perhaps also display: inline-block;