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

Question

↑ 2.1

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

The above line was a combination of html symbol and regular text. If I would like to align them with the same height, how would I do it? Here is the jsfiddle. Thanks!
http://jsfiddle.net/RnaKb/

Answer 1

You could use the css :before pseudo-selector, converting #8593 to \\2191. You can then fiddle with the css for this content:

<span> 2.1</span>

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

This is not exactly the same height currently (looks good though!), but could be with a little fiddling. But you would also have to test in different browsers.

Answer 2

They are already accessible from within the <span> element.

Take a look at the jsFiddle where i just added a little .css

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

But i understand you think the ↑ arrow symbol is styled differently, but it is not. It was drawn that way. So if you want it vertically aligned to bottom, you will have to enclose it in some individual container witch you will have to work with.

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

Here is a working example : jsFiddled here