• 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

    • Here in the UK we used to have a mobile network that would've been perfect for Trump. It was called ... Orange!
    • Trump's team takes down Trump Mobile coverage map that includes "Gulf of Mexico" by David Uzondu Image via Depositphotos.com When Donald Trump returned to office in January this year, one of the first things he did was sign an executive order to officially rename the Gulf of Mexico to the "Gulf of America". It was a signature move, but it seems his own team might have forgotten about it. The rollout for the new Trump Mobile service, a venture headed by his sons, is already facing issues with its pre-orders, and now has a whole new self-inflicted problem to deal with. A post from Travis Akers (@travisakers) has shown that the Trump Mobile official coverage map, intended to show potential customers their signal strength, prominently featured the name "Gulf of Mexico." It appears shortly after Akers's post went live, the Trump team took down the page, so if you visit trumpmobile.com/coverage, you would get a 404 error. Anyways, here's a screen recording of what the page looked like before the take down (double click to enlarge): So, how could the Trump team make such a mistake on something so politically important to them? From the recording, it looks like the coverage map is powered by Mapbox, a popular location platform for developers. Mapbox, by default, still uses "Gulf of Mexico" because its core map data is built on global sources like OpenStreetMap, which have not adopted the unilateral name change. Even though the official name is different in the US, these global datasets stick to the international consensus. Other tech companies, like Google, address this by changing their maps to display "Gulf of America" only for users in the US, a decision that annoyed the president of Mexico. The funny thing is, fixing this would have been pretty simple. Mapbox is quite flexible, and you can edit "natural features", including bodies of water. Here's how we did it (click to enlarge): The Trump Mobile coverage map has been offline for over five hours, as the Trump team presumably works to fix the issue and bring the page back online.
    • Maybe stop using that ###### once and for all? One can live withouth it. Anything META is cancer.
    • This also highlights the dangers of giving corporations unencrypted access to your documents / photos. It would appear this persons data has likely been scanned by Ai, which found something it didn't like, locking access to the account.
  • Recent Achievements

    • Week One Done
      rozermack875 earned a badge
      Week One Done
    • Week One Done
      oneworldtechnologies earned a badge
      Week One Done
    • Veteran
      matthiew went up a rank
      Veteran
    • Enthusiast
      Motoman26 went up a rank
      Enthusiast
    • Mentor
      M. Murcek went up a rank
      Mentor
  • Popular Contributors

    1. 1
      +primortal
      684
    2. 2
      ATLien_0
      266
    3. 3
      Michael Scrip
      194
    4. 4
      +FloatingFatMan
      177
    5. 5
      Steven P.
      140
  • Tell a friend

    Love Neowin? Tell a friend!