css - How to make characters to be written from right to left in HTML -

css - How to make characters to be written from right to left in HTML -

i need display -xxx.x °c °c symbol placed there absolute positioning , stay there. need text in front of symbol displayed this:

-123.5 °c  -12.4 °c    7.6 °c

also want text displayed on top of fixed length text section yellow background color this:

 _______ |__-12.9| °c  _______ |____0.9| °c  <span  id="tempresult" style="position:relative; bottom: 3px; right:14px;     background-color:#ccff66; border: 3px solid #8ac007; border-style:double  solid solid double;">----.-</span>

°c

using :after solve problem of keeping °c unit identifier @ end of each temperature. create yellow box, use span element set display:inline-block , add fixed width, so:

html

<div><span>-129.4</span></div>

css

div {     width:120px; } div:after {     content:" °c" } span {     text-align:right;     width:80px;     display:inline-block;     background-color:yellow; }

note: edit css use classes each element instead of tag names.

Comments