• 0

CSS Content String concatenation


Question

kman1985

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 post
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Ambroos

It's not possible, you can't insert anything but plain simple text using the CSS content property. Not even <a>'s.

Link to post
Share on other sites
  • 0
lunamonkey

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.

Link to post
Share on other sites
  • 0
lunamonkey

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

Link to post
Share on other sites
  • 0
kman1985

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.

Link to post
Share on other sites
  • 0
Seahorsepip

Css is rendered after the HTML so no :p

You can try js.

Link to post
Share on other sites
  • 0
lunamonkey

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]

Link to post
Share on other sites
  • 0
threetonesun

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.

Link to post
Share on other sites
  • 0
lunamonkey

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.

Link to post
Share on other sites
  • 0
threetonesun

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.

Link to post
Share on other sites
  • 0
kman1985

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

});

Link to post
Share on other sites
  • 0
jordaniel
On 1/13/2013 at 3:09 PM, kman1985 said:

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

 

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

Link to post
Share on other sites
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Save 92% off this Complete Web Developer Course: Build 20 Websites Course
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 92% off this Complete Web Developer Course: Build 20 Websites Course. A 10-hour hands-on course to help you learn the fundamentals of HTML, CSS & JavaScript and build 20 real-world websites.



      Learn how to build websites for your business or your portfolio. This is the best course to learn how to build websites with HTML, CSS, and JavaScript. In this course, you learn by doing. Build your own fantastic websites today. One of the best features is that you can watch the courses at any speed you want. This means you can speed up or slow down the video if you want to. This course is project-based, so you will not be learning a bunch of useless coding practices.

      Learning how to code is a great way to jump into a new career or enhance your current career. Coding is the new math, and learning how to code will propel you forward for any situation. Learn it today and get a head start for tomorrow. People who can master technology will rule the future.

      Access 41 lectures & 10 hours of content 24/7 Learn to build your own websites Code in CSS, JavaScript, & HTML Learn practical, employable skills Build 20 fantastic websites to use in your portfolio Jump start your programming career Good to know
      Updates included Length of access: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and license info, click here.

      Here's the deal:
      This Complete Web Developer Course: Build 20 Websites Course normally costs $199 , but you can pick it up for just $14.99 for a limited time - that represents a saving of $184.01 (92%)!

      >> Click here to purchase, or learn more about it <<
      See all discounted Online Courses on offer. This is a time-limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Check out the Neowin Store for our preferred partners.



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off +3 months for free! Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • By Usama Jawad96
      YouTube reveals top trending videos and creators in the U.S. in 2020
      by Usama Jawad

      2020 has been an unusual year with people all over the world being restricted to their homes for extended durations and having to rely on digital services and capabilities for the most part. On the digital services front, YouTube even decided to cancel its annual Rewind celebration. While the company blamed the current circumstances, it has to be noted that its Rewind videos have been very poorly received over the past couple of years.

      While the firm may not be releasing a montage celebrating its top creators around the globe this year, it has still revealed the top trending videos and content creators in the U.S.

      YouTube has divided its trending content for the U.S. in various categories. Collectively, its top 10 trending videos on the platform garnered 356 million views and were watched for 48 million hours. The channels hosting this content totaled 175 million subscribers. Trending content and creators in 2020 mainly ranged from gaming to COVID-related videos. You can view the various categories below:

      Top Trending Videos (U.S.) Netflix Is A Joke - 8:46, Dave Chappelle Mark Rober - Building the Perfect Squirrel Proof Bird Feeder SNL - First Debate Cold Open JeffreeStar - We Broke Up MrBeast - I Bought The World’s Largest Firework NikkieTutorials - I’m Coming Out. Dream - Minecraft Speedrunner VS 3 Hunters GRAND FINALE NBC - Ricky Gervais’ Monologue - 2020 Golden Globes Dude Perfect - Quarantine Stereotypes SomeGoodNews - Some Good News with John Krasinski - Ep 1 Top Creators (U.S.) MrBeast Dream ZHC SSSniperwolf Tiko Chloe Ting JoshDub The Royalty Family LazarBeam James Charles Breakout Creators (U.S.) Dream Tiko Chloe Ting EddieVR charli d’amelio GeorgeNotFound Dixie D’Amelio Corpse Husband SomeGoodNews Hyram Top Music Videos (U.S.) Future - Life is Good ft. Drake Tekashi 6ix9ine - Gooba Lil Baby x 42 Dugg - We Paid NLE Choppa - Walk Em Down ft. Roddy Ricch Cardi B - WAP ft. Megan Thee Stallion DaBaby - Rockstar ft. Roddy Ricch Roddy Ricch - The Box Drake - Laugh Now Cry Later ft. Lil Durk YoungBoy Never Broke Again - Lil Top Lil Baby - The Bigger Picture While YouTube has only revealed the trending videos and content creators in the U.S. currently, it's natural to assume that it will do a similar list on a global level at some later point in time.

    • By News Staff
      Save 98% off the 2021 Premium Learn to Code Certification Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off this Premium Learn to Code 2021 Certification Bundle. Amp up your programming skill set with 270+ hours of content on the leading coding languages — taught by top-rated instructors Ft. Rob Percival, Nick Walter, and more!.



      This deal consists of the following courses:

      JavaScript Beginner Bootcamp
      Understand the JavaScript Language & Learn to Create and Launch Interactive Webpages SwiftUI Apps for All Apple Platforms
      Learn the True Magic of SwiftUI & Make Apps and Widgets for iPhone, Mac, iPad, Apple Watch, and AppleTV The Complete C# Programming Course
      Master C# & .NET Framework with Code Challenges, Exercises, & Real-Life Examples The Complete Web Developer Course 2.0
      Learn By Doing: Build 25 Websites & Mobile Apps Alongside Top-Rated Online Coding Instructor, Rob Percival! SwiftUI: The Complete Developer Course
      Learn Everything You Need to Know About the SwiftUI Framework & Leverage All of Its Great New Technologies 2020 Complete Ruby on Rails 6 Bootcamp
      Start From the Basics of Ruby on Rails & Go All the Way to Creating Your Own Applications Learn Python for Data Analysis & Visualization
      Gear Yourself with Necessary Skills for Expert-Proven Data Science Techniques Raspberry Pi Essentials & Extras
      Broaden Your Raspberry Pi's Horizons with This 1-Hour Crash Course PHP & MySQL: Certification Course for Beginners
      Learn to Build Database-Driven Web Applications Using PHP & MySQL Bootstrap & jQuery: Certification Course for Beginners
      Create Fully Animated, Interactive, Mobile Responsive Web Pages Using Bootstrap & jQuery Library HTML, CSS, & JavaScript: Certification Course for Beginners
      A Comprehensive Guide for Beginners Interested in Learning HTML, CSS, & JavaScript to Build Interactive Web Pages Java Foundations
      Master the General Purpose & Object-Oriented Language of Java to Enhance Your Skills for Mobile Development Making APIs with Django & Python
      Use the REST Framework to Quickly Make APIs for Your Django Projects Making Websites with Python & Django 3: The Ultimate Beginner's Guide
      Boot Up the Django 3 Web Framework Written In Python & Develop Websites Fast JavaScript Master Class
      A Comprehensive Course Just About Every Fact on JavaScript You Could Ever Hope to Know Python for Everyone
      Learn the Basic Syntax of How Python Language Works How to Get a Job as a Web Developer
      Tips, Tricks & Industry Secrets to Help You Land That Web Development Job The Python Mega Course: Build 10 Real World Applications
      A Complete Practical Python Course for Beginners & Intermediates! Master Python 3 by Building Actual Python Apps ROS2 For Beginners
      Master the Key ROS Concepts to Create Powerful & Scalable Robot Applications The Complete Web Developer Course: Build 20 Websites
      Learn the Fundamentals of HTML, CSS & JavaScript by Building 20 Real-World Websites Machine Learning for Absolute Beginners
      Learn to Build Machine Learning Models Using Spreadsheet Data Java Interview Questions: Data Structures & Algorithms
      The Best Java Interview Guide with the Most Common Beginner Questions Asked by FANG Companies

      The Ultimate Amazon Honeycode Guide: Build 7 Apps
      Build Apps to Automate Data Entry: Make Inventory Management Apps & More Easy Business Projects

      Learn Flutter & Dart: Complete App Development Projects
      Build Apps in Flutter, Google's Cross-Platform Framework & Code with Its Dart Programming Language

      Complete Data Science Training with Python for Data Analysis
      Learn Statistics, Visualization, Machine Learning & More

      C++ Programming for Beginners
      Master C++, An In-Demand, High-End Language Used for Programs, Games, Development Libraries, & More

      The Complete Front-End Web Development Course
      Take a Hands-on Approach to Learning Real Programming Skills

      Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Premium Learn to Code 2021 Certification Bundle normally costs* $4,056, but you can pick it up for just $59.99 for a limited time - that represents a saving of $3,996.01 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Check out the Neowin Store for our preferred partners.



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2-year plan 68% off +3 months for free (total of 27 months) Private Internet Access VPN - 3 year plan at 86% off ($2.19/month) Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Pay What You Want for this 20-Course Programming Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for the The 20-Course Programming Bundle. From game development to making responsive apps, this 20-course collection has everything you need to start coding.



      What's the deal?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the following course:

      Image Processing with Python: Build an Instagram-Style Filter
      Develop a Photo Filter Editor from Scratch & Master Your Understanding of Matrices, Color Models & More

      Beat the average price to get the following courses as well:

      Azure Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to Microsoft Azure & Make Them Accessible Online

      MongoDB for Beginners
      Get Acquainted with MongoDB & Discover How to Manage Data Operations Like a Pro

      Node.js For Beginners: Create Server-Side Apps with JavaScript
      Learn How to Build Fast Web Applications with Node.js, the Server-Side Solution for JavaScript

      Intro to Next.js
      Get started with the Minimalist Framework That Allows You to Build Static, Server-Rendered React Apps

      Intro to Bootstrap
      Learn Bootstrap, the Secret to Quickly Creating Professional & Attractive Websites + Web Apps

      Create Interactive Pages with Javascript & the DOM API
      Explore the DOM API, HTML5 & Advanced JavaScript Concepts by Building Three Projects

      JavaScript Programming: Learn by Making a Mobile Game
      Dive into JavaScript's Core Concepts By Building a Game From Scratch

      HTML & CSS Course
      Learn HTML & CSS from Scratch by Creating a Responsive Landing Page

      AWS Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to AWS & Make Them Accessible Online

      The Complete HTML5 Mobile Game Development Course
      Use the Phaser HTML5 Framework & JavaScript Technologies to Build Cross-Platform Games

      Master Unity Game Development: Beginner's Bootcamp
      Learn Unity & C# by Creating a 3D Multi-Level Platformer Game

      Master Unity Mobile Game Development
      Learn the Quirks of Mobile Game Development with Unity

      Unity Game Development: Build a First-Person Shooter
      Master Unity by Building Your Own Version of Doom or Call of Duty

      Data Manipulation with Pandas
      Learn How to Read & Manipulate Data + Prepare It for Analysis Using the Pandas Library

      The Complete Python Data Visualization Course
      Master the Major Plotting Libraries Matplotlib, Seaborn & Bokeh + Use Them to Create Beautiful Plots

      Learn Python 3 by Making a Game
      Get up to Speed with Python by Creating Your Very Own Game

      Build a Tower Defense Game with Phaser 3
      Master the Skills Needed to Build a Complete Tower Defense Game Using Phaser 3

      Numpy Matrices & Vectors
      Take Advantage of the Numpy Library & Build Powerful + Functional Arrays and Matrices

      The Complete Responsive Web Design Course
      Learn How to Build Professional Websites That Work Across Different Devices & Platforms

      Good to know
      Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase Here's the deal:
      The bundle represents an overall retail value of $3,732 But you can Pay What You Want for the unlocked courses (as little as $1) Beat the average price and you'll take home the entire bundle. Qualify for the giveaway!
      Beat the Leader's price and get entered into the epic giveaway—plus get featured on the leaderboard!

      >> Pay What You Want for The 20-Course Programming Bundle <<
      See other Pay What You Want deals. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Subscribe to Neowin for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Save 97% off this Complete One-Hour Coder Bundle - now just $34.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 97% off this Complete One-Hour Coder Bundle. Train your inner programmer with 6 one-hour courses on C++, CSS, HTML, JavaScript, and Python.



      This bundle consists of the following courses:

      C++ Foundations
      Begin Your Coding Journey with the High-End, Popular C++ Language for Software & Game Development CSS Foundations
      Enhance Website Aesthetics & Designs with the Style Sheet Language CSS HTML Foundations
      Start Creating Your Own Websites, Web Apps, & More Java Foundations
      Master the General Purpose & Object-Oriented Language of Java for Mobile Development JavaScript Foundations
      Learn JavaScript for Web & HTML5 Game Development Python Foundations
      Learn the Foundations of Python for Data Science & Machine Learning Good to know
      Updates included Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase For specifications, license and instructor info please click here.

      Here's the deal:
      This Complete One-Hour Coder Bundle normally costs* $1,200, but it can be yours for just $34.99 for a limited time, that's a saving of $1,165.01 (97%) off.

      >> Get this deal, or learn more about it here <<
      See all Online Courses on offer. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Subscribe to Neowin for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.