• 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

    • good grief .... first brittney murphy in the first run now him
    • I do not think that Windows 11 will pick up pace as October 2025 draws near. Even though I was a Windows Vista fan back in the day, this really reminds me of the (lack of) transition between Windows XP to Windows Vista. In the end, Microsoft had to backtrack and extend Windows XP support until Windows 7 was adopted.
    • How many minutes until they rename this? Outside of the search engine itself, it seems anything with the Bing name attached quickly gets renamed.
    • Save 15% on the Insta360 Link 2 4K Webcam, now available at the lowest price by Taras Buria Insta360 is known for its high-quality 360-cameras, but the company also offers high-end webcams for those who want to elevate their video calls or streaming. Right now, the Insta360 Link 2 4K webcam is available at a new all-time low price, saving you 15% off the standard MSRP. The Insta360 Link 2 is not your standard 4K webcam. This camera is mounted on a two-axis gimbal that physically pans and tilts to follow you as you move around the room. You can also set boundaries to prevent the camera from capturing certain areas and control it with gestures for a hands-free experience. The camera itself has a large 1/2" 4K sensor that captures more light and details with HDR and low-light mode support. A larger sensor also means a more natural bokeh effect. Built-in microphones support voice focus and voice suppression, and the camera can balance your voice with background music. Other features include additional modes, such as whiteboard mode, DeskView mode, portrait mode, and privacy mode. The latter tilts the camera down after 10 seconds of inactivity (you can also push it down manually). The Insta360 Link 2 is also remotely operated with a dedicated phone app, plus its desktop software lets you adjust features like background, filters, and more. Insta360 Link 2 4K Webcam - $169.99 | 15% off on Amazon US Insta360 Link 2 4K Webcam Tripod Bundle - $195 | 15% off on Amazon US This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • RIP Jonathan Joss aka John Redcorn https://www.nbcnews.com/news/us-news/jonathan-joss-king-hill-voice-actor-killed-san-antonio-shooting-rcna210437
  • Recent Achievements

    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well
    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      160
    2. 2
      ATLien_0
      124
    3. 3
      Xenon
      120
    4. 4
      snowy owl
      109
    5. 5
      +Edouard
      97
  • Tell a friend

    Love Neowin? Tell a friend!