HTML5----CSS显示半个字符
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>