CSS 替换文本

桔子柠檬水

于 2021-09-17 18:30:28 发布

阅读量1.3k

点赞数 2

分类专栏： CSS 文章标签： css html

本文链接：https://blog.youkuaiyun.com/s_mitsuha/article/details/120354557

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

<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;
}