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
like
.myproducts::before {
content: "test" <a href="www.google.com>Link to Google</a> "more text / paragraph etc"
font-color:red;
etc
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?
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.
I’m guessing something like this is what you are after.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
</head>
<body>
<h1>Testing</h1>
<p class="myproducts">This is the myproducts original content</p>
<script>
(function() {
document.querySelector('.myproducts').insertAdjacentHTML('afterbegin', 'Click on <a href="http://www.google.com">This Link</a> to go to google. ');
})();
</script>
</body>
</html>
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
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.
Mittineague
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.
