html - 如何使用使用 html 代码生成的文本设置文本样式

Question

↑ 2.1

<span>&#8593; 2.1</span>

上面的行是 html 符号和常规文本的组合。如果我想将它们对齐到相同的高度，我该怎么做？这是jsfiddle。谢谢！
http://jsfiddle.net/RnaKb/

Answer 1

它们已经可以从<span>元素内部访问。

看看我刚刚添加了一点 .css的jsFiddle

span {
    font-size:24px;
    line-height:27px;
    vertical-align:baseline;
    border-bottom:1px solid red;
    background-color:#eef;
}

但我知道您认为 ↑ 箭头符号的样式不同，但事实并非如此。就是这样画的。因此，如果您希望它与底部垂直对齐，则必须将其封闭在必须使用的某个单独的容器中。

<span><span class="your-class-to-ajust-bottom">&#8593;</span> 2.1</span>

这是一个工作示例：jsFiddled here

Answer 2

您可以使用 css:before伪选择器，将 #8593 转换为 \2191。然后，您可以摆弄此内容的 css：

<span> 2.1</span>

span:before {
    content:'\2191';
    vertical-align: text-bottom;
}

目前这不是完全相同的高度（虽然看起来不错！），但可能有点摆弄。但是您还必须在不同的浏览器中进行测试。