<div class="eq-c">
<var>S</var> =
<span class="intsuma">
<span class="lim">5</span>
<span class="sum-frac">∑</span>
<span class="lim"><var>n</var>=0</span>
</span>
<div class="fraction">
<span class="fup">(<var>x</var> + 1)
<sup><var>n</var></sup>
</span>
<span class="bar">/</span>
<span class="fdn"><var>n</var></span>
</div>
</div>
// Body
body{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
text-align: center;
}
// Sum
.intsuma {
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.intsuma > span {
display: block;
font-size: 70%;
}
.intsuma .lim-up {
margin-bottom: -1.0ex;
}
.intsuma .lim {
margin-top: -0.5ex;
}
.intsuma .sum {
font-size: 1.5em;
font-weight: lighter;
}
.intsuma .sum-frac {
font-size: 1.5em;
font-weight: 100;
}
.fraction {
display: inline-block;
vertical-align: middle;
margin: 0 0.2em 0.4ex;
text-align: center;
& > span {
display: block;
padding-top: 0.15em;
}
& span{
&.fdn {
border-top: thin solid black;
}
&.bar {
display: none;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.