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.
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
Post a Comment