为一个字符添加一半的样式
如下图所示，为字符添加一半的样式
来，咱直接贴代码，然后复制下面的代码就可以看到如上图所示的效果了，纯css制作，很简单吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>halfstyle测试</title>
<style type="text/css">
.halfStyle{
position: relative;
display: inline-block;
font-size: 80px;
color: transparent;
overflow: hidden;
white-space: pre;
}
.halfStyle:before{
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content:attr(data-content);
overflow: hidden;
pointer-events:none;
color: #fa0;
text-shadow:2px -2px 0px #af0;
}
.halfStyle:after{
display: block;
direction: rtl; /*把文本设置为从右向左*/
z-index: 2;
position: absolute;
top: 0;
left: 50%;
width: 50%;
content:attr(data-content);
overflow: hidden;
pointer-events:none; /* 禁用鼠标事件*/
color: #f00;
text-shadow:2px -2px 0px #af0;
}
</style>
</head>
<body>
<div>
<!-- 这里的data是自定义属性，配合before，after使用content的attr调用 -->
<span class="halfStyle" data-content="jing">jing</span>
<span class="halfStyle" data-content="jing">jing</span>
</div>
</body>
</html>
