What I am after is to colour in just one character of my code throughout the page.
The lines between each of the words are what I would like to be a different colour from the rest of the text but I would like to do this in CSS rather than horribly adding to each one just to change its colour.
Anti-virus End Point | Disk Encryption | UTM | Email and Web Security
Is it possible through CSS?
here is what I have attempted but I don't think I'm coming close.
| {
color:#00FF00;
}
If you wrap each of the | character in a span with a class you can use that:
<span class="separator">|</span>
.separator {
color: #0F0;
}
Another solution would be encapsulating the text (not the separators) inside <span/>s, and use :after pseudo-element to create the separator.
Then, specify that, for the last element, the separator is not required:
HTML
<div class="separator">
<span>Anti-virus End Point</span>
<span>Disk Encryption</span>
<span>UTM</span>
<span>Email and Web Security</span>
</div>
CSS
.separator > span:not(:nth-last-child(1)):after {
content: ' | ';
color:#00FF00;
}
AFAIK there is no pure CSS solution for this. If you are using jQuery it would probably be easiest to make use of the highlight plugin for this: http://bartaz.github.io/sandbox.js/jquery.highlight.html
try this
css
.divider {
color:#00FF00;
}
html
try <span class="divider">|</span> try
Another solution with pure js:
<style>
.paint{
color: #00FF00;
}
</style>
<div id="result"></div>
<script>
var str = "Anti-virus End Point | Disk Encryption | UTM | Email and Web Security";
str = str.split('|').join('<span class="paint">|</span>');
document.getElementById("result").innerHTML = str;
</script>
<span>or other tag for this to be possible with pure CSS. Is it? Can you show the HTML source code?