<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;
}
css 替换文本