)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

HTML Fraction

  1. <style>
  2.   .frac {
  3.     display: inline-block;
  4.     position: relative;
  5.     vertical-align: middle;
  6.     letter-spacing: 0.001em;
  7.     text-align: center;
  8.   }
  9.   .frac > span {
  10.     display: block;
  11.     padding: 0.1em;
  12.   }
  13.   .frac span.bottom {
  14.     border-top: thin solid black;
  15.   }
  16.   .frac span.symbol {
  17.     display: none;
  18.   } 
  19. </style>
  20.  
  21. <div class="frac">
  22.   <span>1</span>
  23.   <span class="symbol">/</span>
  24.   <span class="bottom">2</span>
  25. </div>
  26.  
  27. &#xb7; 
  28. <div class="frac">
  29.   <span>3</span>
  30.   <span class="symbol">/</span>
  31.   <span class="bottom">4</span>
  32. </div>

I saw this trick on stackoverflow by user lokesh. It will display:

1 / 2
·
3 / 4
// css // html

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}