HTML5----CSS显示半个字符

最新推荐文章于 2022-07-28 11:22:58 发布

damys

最新推荐文章于 2022-07-28 11:22:58 发布

阅读量4.2k

点赞数 1

分类专栏： HTML5.CSS3 文章标签：半个字符

本文链接：https://blog.csdn.net/damys/article/details/25964035

版权

HTML5.CSS3 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

CSS显示半个字符的基本思路：

就是一个字写两遍，分别显示一半。这里就需要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它们拼成一个字。

效果图：

CSS:

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

HTML:

<span class="halfStyle" data-content="到">到</span>
<span class="halfStyle" data-content="此">此</span>
<span class="halfStyle" data-content="一">一</span>
<span class="halfStyle" data-content="游">游</span>