html - How to display horizontal fraction symbol -


i want imitate fraction numbers this: http://projectpophealth.org/images/multi-provider_measure_page.png

i've seen alternative ways display fractions: what math symbol representing fraction?

but , feel of horizontal symbol. how display in html?

as commented difficult so, here's answer. i've used inline elements , turning them block level render 1 below another, , separating them out, use border-bottom on first span element.

rest, top offset, use position: relative; settle down... rest self explanatory.

demo

html

<div>(<span><span>18</span><span>26</span></span>)</div> 

css

div {     font-size: 40px;     color: #515151; }  div > span {     font-size: 18px;     display: inline-block; }  div > span > span {     display: block;     padding: 0 5px;     position: relative;     top: 5px; }  div > span > span:first-child {     border-bottom: 1px solid #515151;     color: green; }  div > span > span:last-child {     color: tomato; } 

i feel these types of expressions or on complex ones cumbersome css only, hence, take @ mathjax


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -