用CSS3美化半个字符巧妙方法

davidhhs

于 2015-08-14 16:10:14 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

分类专栏： web 前端文章标签： css3

本文链接：https://blog.youkuaiyun.com/davidhhs/article/details/84737611

web 前端专栏收录该内容

23 篇文章

订阅专栏

更多详细内容点击

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /*  任何宽度都可以 */
    color: black; /* 任何颜色，或透明 */
    overflow:hidden;
    white-space: pre; /* 处理空格 */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #f00;
}

<span class="halfStyle" data-content="风">风</span>