Format dom as expression using css - html

Question

I'm creating a site that uses tags and needs to perform basic tag algebra with operators not, and, or. I have a dom element that describes the expression but can't display the expression using css.
Consider the following expression:
([Green] or ((not [Blue]) and ([Red] or (not [Yellow]))))
Which is represented in the dom as:
<span class="tag-expression">
<span class="tag-or">
<span class="tag" value="green">Green</span>
<span class="tag-and">
<span class="tag-not">
<span class="tag" value="blue">Blue</span>
</span>
<span class="tag-or">
<span class="tag" value="red">Red</span>
<span class="tag-not">
<span class="tag" value="yellow">Yellow</span>
</span>
</span>
</span>
</span>
</span>
I've managed to include the parenthesis using css' :before and :after tied with the content attribute (jfiddle demo). But have no luck showing the operators ¬, &, |. I've been toying with including a <span class="operator"/> with an image background but I was wondering is there is another way to make this using the :before and :after selectors.
Any ideas?

Answer 1

Here you go, it works with what you provided me in the example, you should test it out in more complex expressions to make sure it is correct.
I added some complex CSS selectors at the end of your CSS script for showing your operators:
.tag-expression .tag-or > span:nth-child(2):before {
content: ' | (';
}
.tag-expression .tag-and > span:first-child:after {
content: ' ) & ';
}
.tag-expression .tag-not:before {
content: ' ( ¬ ';
}​
You can checkout this in this fiddle. Let me know if that solves your problem.