<div class="eq-c">
<var>y</var> =
<span class="radical">√</span>
<span class="radicand"><var>x</var><sup>2</sup> + 6</span>
</div>
// Body
body{
position: absolute !important;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
text-align: center;
}
html *{
position: relative;
}
.eq-c {
text-align: center;
padding: 0em 0em;
font-size: 2rem;
& .radical {
font-size: 3.6rem;
vertical-align: middle;
margin: 0;
padding: 0;
right: -0.8rem;
}
& .radicand {
top: 0.4rem;
padding: 0 0.5rem;
border-top: 0.2rem black solid;
}
& sup {
font-size: 75%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.