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

Question

我知道我可以用“°”在 HTML 中添加一个度数符号，我正在查看使用 :after 选择器和 content 属性的 CSS 示例，但我无法将它们放在一起。

我希望在输入框中出现的文本之后显示一个度数符号。

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

和CSS：

.threshold input:after {
    content: "&deg;"
}

但这似乎不起作用。关于如何解决它的任何想法。我可以将度数符号存储在值中，但这需要大量额外的 JavaScript 用于验证等。有什么办法可以用 CSS 做到这一点？

score 12 · Accepted Answer

尝试这样的事情

HTML

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

CSS

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

演示： http: //jsfiddle.net/Tt2hU/或http://jsfiddle.net/Tt2hU/1/

score 4 · Accepted Answer

似乎在带有输入标签的 CSS 中是不可能的。

score 3 · Accepted Answer

3

应该像这样工作

度°只需通过

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

于 2013-01-11T16:31:09.847 回答

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

5 回答 5