• 0

CSS Content String concatenation


Question

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>";
}

Link to comment
https://www.neowin.net/forum/topic/1130684-css-content-string-concatenation/
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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

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.

  • 0

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>
[/CODE]

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... :-)

  • 0
  On 14/01/2013 at 23:20, kman1985 said:

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)
[/CODE]

  • 0

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>
[/CODE]

Wouldn't work for you, though.

  • 0
  On 15/01/2013 at 19:10, threetonesun said:

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>
[/CODE]

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.

  • 0
  On 15/01/2013 at 19:21, lunamonkey said:

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.

  • 0

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

$(document).ready(function() {
	$('&lt;img src="/images/big-arrow.png" alt="Arrow" width="22" height="22" border="0" /&gt;').appendTo('#side-nav ul li');

	$('#side-nav ul li img').css ({
		position: 'relative',
		float: 'right',
		top: '-30px',
		left: '-5px'	  
	});

});

  • 0
  On 13/01/2013 at 21:09, kman1985 said:

Is it possible to use string concatenation with the content property.

 

Expand  

You don't use + with concatenation in CSS. An example of string concatenation would be

content: "foo" "bar";

Which would result simply in "foobar" on the screen.

A real world example of concatenation with the content property would be something like this

ol {
  li {
    :before {
      content: counter(li)".";
    }
  }
}

Which would result in numbers followed by periods (1. 2. 3. etc.)

This topic is now closed to further replies.
  • Posts

    • I'm sorry for sounding rude. I was just frustrated. I really want to get this right because I don't want to take any risk of potentially contaminating other hardware and risk losing precious files. Thanks again for the help. 
    • I am low-key enjoying the new start menu of 25H2 build. Looks like the management team who shoved the Recommended Section down our throats up till now got fired in recent gommage at MS. Also loving the 6Ghz Hotspot feature. I only enabled these 2 features and I am happy. I keep an eye on MDL forums for 26200.xxxx updates once a week to stay up to date manually. I downloaded the latest build from https://uupdump.net selected Dev Channel tab and downloaded amd64 build. Let the script ripp. Then I used vivetool to enable the above 2 features • 25H2 New Start Menu ViVeTool.exe /enable /id:47205210,49221331,49381526,49402389,49820095,55495322,48433719 • Enable Wifi 6Ghz Hotspot ViVeTool.exe /enable /id:40466470,48433719 Reboot and enjoy. Almost all the above info was provided by Neowin at some point.
    • Indeed, I do think its sad in some ways a corporation can never be content with "performing well across every metric" and having over £59 billion cash on hand.
    • They've been focusing on security and quality? Could have fooled me. Their own paying customers literally just got breached because they failed to push SharePoint updates downstream to on prem servers operating outside of their "365" ecosystem.
    • The animosity is unnecessary, when I opened the page I only saw one response which never mentioned your other steps, and when I hit reply it jumped straight to the bottom and again, I saw no other responses.  I was simply agreeing with the first comment that said yes, you should be fine if you erase its current operating system. Using another PC, or the copy of Windows that comes on that PC (former option is more trustworthy), download and run the Windows Media Creation tool.  It will walk you thru the process of downloading Windows and writing it to a USB stick.  It will even ask you at one point whether you're reinstalling it to the current machine or installing it on another machine. Then just boot the PC in question from that USB stick.  Usually spamming Esc, Del, F-8, F-9, F-10, F-11, F-12 or F-2 immediately after power on will bring up a boot menu, it varies by manufacturer.  If Windows starts booting you either missed your window or hit the wrong key. Follow the on-screen instructions.  When it gets to the disk formatting part I usually just delete all the partitions on the destination drive, then select the unpartitioned space as my destination.  The Windows installer will then automatically partition the drive as needed. Be prepared to download drivers from the PC manufacturer's website, they may not come bundled with Windows and you may not be able to use things like WiFi or ethernet until you have them.  They "might" work straight away, but they also might not.  Better to be prepared with a spare PC and a USB stick to transfer them over.
  • Recent Achievements

    • One Month Later
      Philsl earned a badge
      One Month Later
    • One Year In
      armandointerior640 earned a badge
      One Year In
    • One Month Later
      armandointerior640 earned a badge
      One Month Later
    • One Month Later
      Itbob513626 earned a badge
      One Month Later
    • Week One Done
      Itbob513626 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      615
    2. 2
      ATLien_0
      236
    3. 3
      Xenon
      156
    4. 4
      +FloatingFatMan
      122
    5. 5
      Michael Scrip
      116
  • Tell a friend

    Love Neowin? Tell a friend!