Jump to content



Photo

CSS Content String concatenation

css before after content string property

  • Please log in to reply
10 replies to this topic

#1 kman1985

kman1985

    Neowinian

  • Joined: 30-April 02

Posted 13 January 2013 - 21:09

Is it possible to use string concatenation with the content property. I'm trying to display an image before every item in my list, but I want this image to be a link. Here's what I want to do, but I don't know how to do this. If anyone can help me out, that would be great. Thanks.


#side-nav ul li:before {
	position: relative;
	float:right;
	top: 15px;
	content: "<a href='http://url'>" + url('arrow.png') + "</a>";
}



#2 Ambroos

Ambroos

    Neowinian Senior

  • Tech Issues Solved: 3
  • Joined: 16-January 06
  • Location: Belgium

Posted 13 January 2013 - 21:19

It's not possible, you can't insert anything but plain simple text using the CSS content property. Not even <a>'s.

#3 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 13 January 2013 - 21:20

No, you can't do it like this. CSS will not render the tags you input. Converts it to &lt;

What is the actual URL you want to link to?

It might be "better" to add a new anchor element in script rather than use CSS. After all, you are adding function rather than style.

#4 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 13 January 2013 - 21:35

Here's the script if you want it...

  <script>
  
   var figures = document.getElementsByTagName("li");
   for (var counter = 0; counter < figures.length; counter++) {
    var newLink = document.createElement("a");
    newLink.setAttribute("href", "bob");
    var txtNode = document.createTextNode("Hello. This is a new node.");
    newLink.appendChild(txtNode);
  
    figures[counter].insertBefore(newLink,figures[counter].firstChild)
   }
 
 
  </script>

Ignore the naming convention, I had just written on my site and I have the figure element. You might have to extend the functionality so that other lists are ignored, but I can't be bothered to write that for free... :-)

#5 OP kman1985

kman1985

    Neowinian

  • Joined: 30-April 02

Posted 14 January 2013 - 23:20

Well if I use jquery can't I just do it all in jquery? Add both the image and the link after the certain element list item? Thanks.

#6 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 13
  • Joined: 23-January 11
  • Location: Vlissingen, Netherlands
  • OS: Windows 8 Pro
  • Phone: Sony Xperia Z White

Posted 15 January 2013 - 05:55

Css is rendered after the HTML so no :p
You can try js.

#7 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 15 January 2013 - 18:59

Well if I use jquery can't I just do it all in jquery? Add both the image and the link after the certain element list item? Thanks.


If you already have jQuery, you can change my code (which does the same thing) for jQuery. The selector part of it will be easier if you use jQuery.

var $newLink = $("<a />"),
$existingListItems = $("#side-nav ul li");
$newLink.attr("href","http://url")
.text("Here's my new item")
.css({
position: "relative",
float:"right",	  
  top: "15px"
});
$existingListItems.prepend($newLink)


#8 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 15 January 2013 - 19:10

Please don't use javascript for this. :s

Or if you do, at least consider what will happen if your user doesn't have js enabled. I don't see why
<ul>
<li><a href="somewhere"><img /></a><p>List element text</p></li>
...
</ul>

Wouldn't work for you, though.

#9 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 15 January 2013 - 19:21

Please don't use javascript for this. :s

Or if you do, at least consider what will happen if your user doesn't have js enabled. I don't see why

<ul>
<li><a href="somewhere"><img /></a><p>List element text</p></li>
...
</ul>

Wouldn't work for you, though.


I was assuming he didn't have access to the code behind that renders these elements. Then again, I don't get why he would want a link in the side nav that isn't already there. It's a nav bar... why add an image link in there? If it's for visible purposes, then I would advise adding it as a background image.

Then again, it might help if he listed his actual problem rather than for just a solution to an isolation code issue.

#10 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 15 January 2013 - 19:36

I was assuming he didn't have access to the code behind that renders these elements. Then again, I don't get why he would want a link in the side nav that isn't already there. It's a nav bar... why add an image link in there? If it's for visible purposes, then I would advise adding it as a background image.

Then again, it might help if he listed his actual problem rather than for just a solution to an isolation code issue.


Fair enough. If there's already a link in a <li> and he can't get at the source, appending with js is probably the best way to go.

#11 OP kman1985

kman1985

    Neowinian

  • Joined: 30-April 02

Posted 16 January 2013 - 19:37

Thanks guys. Got it working with jquery. Heres the code I used.

$(document).ready(function() {
	$('<img src="/images/big-arrow.png" alt="Arrow" width="22" height="22" border="0" />').appendTo('#side-nav ul li');
  
	$('#side-nav ul li img').css ({
		position: 'relative',
		float: 'right',
		top: '-30px',
		left: '-5px'	  
	});

});




Click here to login or here to register to remove this ad, it's free!