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: 7
  • Joined: 16-January 06
  • Location: Belgium
  • OS: OS X Yosemite / Windows 7
  • Phone: Sony Xperia Z2

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

    #

  • 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

    #

  • 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: 28
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 15 January 2013 - 05:55

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

#7 lunamonkey

lunamonkey

    #

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

Posted 15 January 2013 - 18:59

[quote name='kman1985' timestamp='1358205648' post='595454364']
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.
[/quote]

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

    #

  • 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'	  
	});

});