css 替换文本

<div class="replace-context-page">
    <div class="context">我是小可爱</div>
</div>

display + :after | display + :before

/* display + 伪元素 */
.context{
    display: none;
}
.replace-context-page:after{
    content: ‘小可爱是我‘;
}

visibility + :after

/* visibility + :after */
.context{
    visibility: hidden; 
}
.context:after{
    content: ‘小可爱是我‘;
    visibility: visible;
}

visibility + :before

.context{
    visibility: hidden;
}
.context
    content: ‘小可爱是我‘;
    visibility: visible;
}

visibility + :before + absolute

/* visibility + :before + absolute */
.context{
    position: absolute;
    visibility: hidden;
}
.context:before{
    content: ‘小可爱是我‘;
    visibility: visible;
}

visibility + letter-spacing + word-spacing

/* visibility + letter-spacing + word-spacing */
.context{
    visibility: hidden;
    letter-spacing: -999px;
    word-spacing: -999px;
}
.context:after{
    content: ‘小可爱是我‘;
    visibility: visible;
    word-spacing: normal;
    letter-spacing: normal;
}

display + text-indent + line-height

/* display + text-indent + line-height */
.context{
    text-indent: -999px; /*缩进*/
    line-height: 0;
}
.context:after{
    content: ‘小可爱是我‘;
    text-indent: 0;
    line-height: initial;
    display: block;
}

原文：https://www.cnblogs.com/y-y77/p/15181671.html