• 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

    • It's not. It's a rightwing lie peddled by liars to BillyBob'sFreedumb email chain. Feel free to provide any credible source to support this claim. You won't find a single one. The reason Biden wasn't prosecuted was because it was a handful of documents from the Obama years that were just in storage. And when the FBI asked for them, Biden and his team did everything they could to find them and return them immediately -- even ones the FBI didn't know were "missing". https://en.wikipedia.org/wiki/...assified_documents_incident Whereas the Charlatan in Chief stored mountains of classified material out in the open in his pay to play club infested with foreign spies. https://www.pbs.org/newshour/p...-mar-a-lago-shower-ballroom Trump also revealed this nation's most classified information to foreigners who had no clearance to access them...and then bragged about knowing them to their friends overseas. https://www.nbcnews.com/politi...arines-according-rcna119173 And not only are many still missing and not returned... https://www.cnn.com/interactiv...ssia-intelligence-trump-dg/ Trump denied having them to the FBI repeatedly and moved them around to avoid having to return them to the proper authorities for over a year. https://www.pbs.org/newshour/p...ing-of-classified-documents There is no credible legitimate comparison between the two classified documents cases. You might want to change the source of the information you are getting and falling for. They are obvious lying to you. PS On the content issue...I am a content creator. You and everyone else in world loves the franchises and content I have created and/or contributed meaningfully to. It's the studios that are doing everything they can to remove us, the content creators, from their balance sheets (now with AI)...not the people who consume what we create for free. We've already been paid, thanks. Blame Wall Street for forcing the bottomless greedy enshittification of everything American, not the consumers or the actual creators.
    • https://support.microsoft.com/...61ff-00a1-04e2-2d1f3865450d
    • https://support.microsoft.com/...61ff-00a1-04e2-2d1f3865450d
    • Swatle AI — the smarter way to manage your teams, projects, and tasks now 75% off by Steven Parker Today's highlighted deal comes via our Apps + Software section of the Neowin Deals store, where you can save 75% off on Swatle All-in-One AI Assistant (Premium lifetime subscription). Stop over-hiring and overspending to meet your productivity goals. Swatle is all you need to achieve more with less. Swatle is an all-in-one AI solution designed to supercharge your productivity without over-hiring or overspending. Whether you're managing projects, automating repetitive tasks, or organizing your team's workflow, Swatle can help you achieve more with less. Powered by cutting-edge artificial intelligence, it adapts to your needs, streamlines operations, and eliminates inefficiencies so you can focus on what matters most—growing your business. With Swatle, working smarter isn’t just a goal—it’s your new reality. Let Swatle AI handle the necessary mundane tasks. SWATLE AI PROJECT ASSISTANT Step-by-Step Guidance: For every task you assign, either write step-by-step instructions yourself or let Swatle AI write on your behalf Skip the Standups: Ask Swatle AI about project progress and get instant, actionable updates—no daily meetings needed Accurate Time Estimates: Plan your day better by estimating the time required to complete your tasks Message Refinement: Send crystal clear messages; Swatle AI will rephrase your message & make it crisp and clear Project Quality Boost: Turn normal project descriptions into a crystal-clear description TEAM COLLABORATION MADE EASY Streamline Communication: Send & receive messages and updates within Swatle for real-time, tool-free collaboration Centralized Team Portfolios: Create dedicated portfolios to highlight your team's expertise & track their contributions effectively Conversational Task Creation: Instantly create tasks while having casual conversations with a single click. Make sure nothing falls through the crack Share Files & Feedback Directly: Eliminate scattered documents and email threads by sharing files and providing feedback directly in Swatle chat SWATLE TASKDESK Non-Technical Projects: Specifically designed for projects like marketing campaigns, content creation, and event planning Visualize Work Your Way: Manage tasks through Kanban boards, lists, Gantt charts, or Timelines—whatever fits your flow AI Task Assistant: Break down complex tasks into manageable subtasks quickly & easily Workload Tracking: View the workload of your team members & distribute tasks across the team to encourage a balanced workload. Proactive Notifications: Effortlessly keep your projects on track with timely, proactive notifications SWATLE DEVBOARD Technical Projects: Create unlimited sprints & backlogs for full control and visibility into every phase of your projects Burndown Chart: Provides a clear, real-time visual representation of your team's work remaining against the sprint timeline Set Goals, Create Sprints, Achieve More: Define your objectives and launch focused sprints that empower your team to concentrate on key tasks within short, impactful cycles Why choose Swatle? No Learning Curve: Swatle offers a remarkably easy-to-use interface. Empower your entire team to understand project progress without requiring technical expertise. Actionable Intelligence: Swatle turns raw project data into visualizations, like Assigned vs Completed charts, enabling focused analysis without manual effort. Proactively Mitigate Risks: Swatle visual dashboards make it easy to spot potential delays, bottlenecks, and resource imbalances, enabling you to take timely action and keep your projects on track. Ensure Resources Are Optimized: By visualizing workloads, you can strategically distribute tasks, promote a balanced environment, and prevent team burnout. Maintain Project Alignment & Stakeholder Confidence: Keep everyone from your internal team to clients and stakeholders on the same page with clear Gantt and Timeline views. Good to know Length of access: lifetime Redemption deadline: redeem your code within 30 days of purchase Access options: desktop or mobile Max number of device(s): unlimited Available to both NEW and Existing users Updates included This Swatle All-in-One AI Assistant (Premium lifetime subscription) normally costs $240, but this deal can be yours for just $59.99, that's a saving of $180. For full terms, specifications, and license info please click the link below. Get this lifetime Swatle Premium deal for just $59.99 (75% off) or learn more Although priced in U.S. dollars, this deal is available for digital purchase worldwide. We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Make a donation to support our day to day running costs Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
  • Recent Achievements

    • 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
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      144
    2. 2
      Xenon
      128
    3. 3
      ATLien_0
      124
    4. 4
      +Edouard
      102
    5. 5
      snowy owl
      97
  • Tell a friend

    Love Neowin? Tell a friend!