Adding a degree symbol after content with CSS

Question

I know that I can add a degree symbol in HTML with "°", and I am looking at examples of CSS using :after selector and the content property, but I'm having trouble putting it all together.

I want a degree symbol to show up after the text that appears in an input box.

<div class="threshold">
    <input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>

And the CSS:

.threshold input:after {
    content: "°"
}

But that doesn't seem to work. Any ideas on how to fix it. I could store the degree symbol in the value, but that would require a lot of extra javascript for things like validation and whatnot. Any way to do it with CSS?

Answer 1

Try something like this

HTML

<div class="threshold">
    <input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>

CSS

.threshold:before {
    content: "\00b0"
}

DEMO: http://jsfiddle.net/Tt2hU/ OR http://jsfiddle.net/Tt2hU/1/

Answer 2

This might help: Can I use the :after pseudo-element on an input field?

It seems it may not be possible in CSS with an input tag.