Using the "Content" CSS variable to show a link

I have a class in a project

.myproducts::before { content: "test";font-color:red;etc etc}

What I get on the front end is… test (text in red color) which is almost what I want.
However, what I would also like is a bit of instructive text for example.
Click on THIS link to do so and so.

The hard part, I cannot see how, or even if it is possible to add some HTML

.myproducts::before { 
content: "test" <a href=">Link to Google</a> "more text / paragraph etc"

into the CONTENT variable to display something like

Test Link to Google more text etc etc

Does anyone have an example that would let me put text and html into the content variable? Printing text into a page is easy, getting some interaction is not.
Any thoughts?

No unfortunately you cannot add html using css. You would need JS to do that or of course add it manually to the html.

The content property adds content only not html.

1 Like

Fast reply, thanks!
OK, back to the drawing board on that, I wanted a short piece of text and an internal site link. Thhis to appear on all pages.

1 Like

Yes JS is needed for that if you need a client side solution.

I don’t suppose you could point me to any examples/demos?

I’ll move this to the JS forum as my JS is basic at best and my example below is probably wide of the mark. :slight_smile:

I’m guessing something like this is what you are after.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>

<p class="myproducts">This is the myproducts original content</p>
(function() {
   document.querySelector('.myproducts').insertAdjacentHTML('afterbegin', 'Click on <a href="">This Link</a> to go to google. ');

However that begs the question as why you can’t simply add the html manually anyway as you will need to add the script. Unless of course you already have a script on every page and you can tack the js onto the end of the existing script.

Perhaps I don’t really understand what you are trying to achieve :slight_smile:

1 Like

Thanks for taking the trouble over this Paul. I can’t “Simply add the HTML manually” as the project is built and running.
I can’t edit the template (easily) but I do use the content CSS variable there and thought, ok, just add a link ( Nice and simple, not…)
I’ll test that on a staging version to see if it is possible.

I haven’t tested so I don’t know for certain, but I think with insertAdjacentHTML the HTML is kind of like “tacked in” instead of “built in”.

That doesn’t make much sense to me and I know what I’m trying to explain :shifty:

It may not make any difference depending on what your code does, but hopefully these pseudocode examples will help explain.

 <sometag>foo bar baz</sometag> 

my JavaScript uses insertAdjacentHTML to result in

 <newtag>aha! you scoundrel</newtag>
 <sometag>foo bar baz</sometag> 

as far as the browser is concerned, newtag is there. However, if later code gets the innerHTML of <outertag> the result will be

 <sometag>foo bar baz</sometag> 

without <newtag>

If the JavaScript had changed (corrupted) the HTML with createElement, insertBefore the result would be

 <newtag>aha! you scoundrel</newtag>
 <sometag>foo bar baz</sometag> 
1 Like

I am not sure that helps. I was hoping for something simple. I can put text into the Content CSS variable for display in a pseudo element of before or after. I and put A/ for CRetn, and \201c \201d for quotes, and likely other chars.
What I can’t seem to do is to put in a link within the content var.

The CSS before/after content is display only it does not insert elements into the DOM.

You will need to either alter the source HTML or use JavaScript if you want the DOM to be different.

The example PaulOB posted should work, did you try it without success? If so what errors were there?

Will try all suggestions @ weekend when it’s quiet. Thanks.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.