css如何显示文字的上标和下标

<style type="text/css">

    .demo{

        font-size: 20px;

    }

    .sup span{

        vertical-align: super;

        color: red;

    }

    .sub span{

        vertical-align: sub;

        color: red;

    }

</style>

<div class="demo">

    <p class="sup">一段测试文本，拥有<span>上标</span></p>

    <p class="sub">一段测试文本，拥有<span>下标</span></p>

</div>