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: "&deg;"
}

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?

I've always just put the actual character in there, rather than the entity. — matthewpavkov, Jan 11 '13 at 16:30
As discussed below, a HTML solution is better as screen readers would have no concept of the unit of measurement used for your textbox. I would argue pseudo CSS elements shouldn't be used in this context, and should be reserved for display/styling only. If you add a label to the textbox which contains the unit of measurement then a CSS solution for the degree symbol would be acceptable. — JonKers, Jan 11 '13 at 17:09
Just don’t use a disabled input element. It mostly makes no sense (an element that accepts input but does not accept input). — Jukka K. Korpela, Jan 11 '13 at 17:10

score 12 · Accepted Answer · answered Jan 11 '13 at 16:35

12

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/

answered Jan 11 '13 at 16:35

Idrizi.A

9,819
11
47
88

Yeah, I'm seeing it now. :after doesn't seem to work on input elements, so it's going to have to be wrapped in some way. Many Thanks!! – BishopZ Jan 11 '13 at 16:36
You can add `span` like this demo http://jsfiddle.net/Tt2hU/1/ or to add degree before `div` – Idrizi.A Jan 11 '13 at 16:38
Why is it '\00b0\ and not '\0176'? – Feb 06 '18 at 23:03
@DevonDeason The degree sign in unicode is `U+00B0` thus `\00b0` – Idrizi.A Feb 07 '18 at 07:41

Mick Jones · Answer 2 · 2013-01-11T16:54:41.757

4

should work like this

degrees° is done simply by

<p>degrees&#176;</p>

edited Jan 11 '13 at 16:54

answered Jan 11 '13 at 16:31

Mick Jones

517
4
19

2

Understand the author asked for a CSS solution but semantically a HTML solution is better. Screen readers etc. would have no concept of the unit of measurement of the textbox. – JonKers Jan 11 '13 at 17:00

score 4 · Answer 3 · edited May 23 '17 at 12:09

4

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.

edited May 23 '17 at 12:09

Community

1
1

answered Jan 11 '13 at 16:39

97ldave

5,249
4
25
39

score 3 · Answer 4 · edited Sep 08 '13 at 11:01

3

You have to put in an escaped reference to the hexadecimal Unicode character value (from here)

::after {
  content: "\00b0";
}

DEMO

edited Sep 08 '13 at 11:01

Paul Fleming

24,238
8
76
113

answered Jan 11 '13 at 16:32

Andy

14,427
3
52
76

score 2 · Answer 5 · answered Jan 11 '13 at 16:38

2

HTML entities doesn't work in CSS, you would use a character code entity, i.e. a backslash followed by a hexadecimal character code:

.threshold input:after {
  content: "\00b0";
}

However, this only works on regular elements, not input elements.

Demo: http://jsfiddle.net/Guffa/AcxEG/

answered Jan 11 '13 at 16:38

Guffa

687,336
108
737
1,005

The code in answer does not work because you have selected input `.threshold input:after` – Idrizi.A Jan 11 '13 at 16:43
@Enve: Do you mean in the demo? There the selector doesn't select the input, it only uses a class. I kept the original selector in the answer to keep it consistent with the question. – Guffa Jan 11 '13 at 16:53

Adding a degree symbol after content with CSS

5 Answers5