html - Include quotes in inline style

Question

I have a class that I apply to a span to format it a bit different to show an action someone must take.

<p>Example of styling a <span style="background-color:#ccc; color:#066; font-weight:900; padding:0 8px;">Button</span> press.</p>

This example shows an inline style but it will eventually be in a class. What I want to know is is it possible to add angle brackets around the text as part of the styling? I know that <q> can achieve this but I want this to be part of the styling information. Is this possible in anyway.

Many thanks for any help in advance.

Answer 1

Yes you can include brackets in your styles using pseudo-elements, it isn't supported by <= IE7 though (~4.5% market share last time I checked). This method uses pseudo-elements :before and :after to generate content based on CSS before and after the element respectively (while still remaining inside .button).

jsFiddle

.button:before {
    content:"<";
}

.button:after {
    content:">";
}

Answer 2

You can do this easily with the pseudo :before and :after and content.

span:before {
    content: "«";
}
span:after {
    content: "»";
}

I also think that this would be more appropriate as a kbd element.

http://jsfiddle.net/ExX66/