使用CSS在内容后添加度数符号

Question

我知道我可以使用“＆amp; deg;”在HTML中添加度数符号，我正在查看使用CSS的示例：在选择器和内容属性之后，但我无法将它们放在一起。

我希望在输入框中显示的文字后显示学位符号。

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

CSS：

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

但这似乎不起作用。关于如何解决它的任何想法。我可以将度数符号存储在值中，但这需要大量额外的javascript来验证诸如此类的东西。用CSS做任何事情吗？

Answer 1

尝试这样的事情

<强> HTML

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

<强> CSS

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

DEMO： http://jsfiddle.net/Tt2hU/或http://jsfiddle.net/Tt2hU/1/

Answer 2

这可能会有所帮助：Can I use the :after pseudo-element on an input field?

似乎在CSS中可能无法使用输入标记。

Answer 3

应该像这样工作

度°仅通过

完成

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

Answer 4

您必须输入对十六进制Unicode字符值的转义引用（来自here）

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

DEMO

Answer 5

HTML实体在CSS中不起作用，您可以使用字符代码实体，即反斜杠后跟十六进制字符代码：

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

但是，这仅适用于常规元素，而不适用于输入元素。

演示：http://jsfiddle.net/Guffa/AcxEG/