纯CSS实现设置半个字符的样式

<span class=”halfStyle” data-content=”X”>X</span>
<span class=”halfStyle” data-content=”Y”>Y</span>
<span class=”halfStyle” data-content=”Z”>Z</span>
<span class=”halfStyle” data-content=”A”>A</span>

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; / or any font size will work /
color: black; / or transparent, any color /
overflow:hidden;
white-space: pre; / to preserve the spaces from collapsing /
}
.halfStyle:before {
display:block;
z-index:1;
position:absolute;
:0;
left:0;
width: 50%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
color: #f00;
}

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; / or any font size will work /
color: transparent; / hide the base character /
overflow:hidden;
white-space: pre; / to preserve the spaces from collapsing /
}
.halfStyle:before { / creates the left part /
display:block;
z-index:1;
position:absolute;
:0;
width: 50%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #f00; / for demo purposes /
text-shadow: 2px -2px 0px #af0; / for demo purposes /
}
.halfStyle:after { / creates the right part /
display:block;
direction: rtl; / very important, will make the width to start from right /
position:absolute;
z-index:2;
:0;
left:50%;
width: 50%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #000; / for demo purposes /
text-shadow: 2px 2px 0px #0af; / for demo purposes /
}

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; / or any font size will work /
color: transparent; / hide the base character /
overflow:hidden;
white-space: pre; / to preserve the spaces from collapsing /
}
.halfStyle:before { / creates the part /
display:block;
z-index:2;
position:absolute;
:0;
height: 50%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #f00; / for demo purposes /
text-shadow: 2px -2px 0px #af0; / for demo purposes /
}
.halfStyle:after { / creates the bottom part /
display:block;
position:absolute;
z-index:1;
:0;
height: 100%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #000; / for demo purposes /
text-shadow: 2px 2px 0px #0af; / for demo purposes /
}

.halfStyle { / base char and also the bottom 1/3 /
position:relative;
display:inline-block;
font-size:80px; / or any font size will work /
color: transparent;
overflow:hidden;
white-space: pre; / to preserve the spaces from collapsing /
color: #f0f;
text-shadow: 2px 2px 0px #0af; / for demo purposes /
}
.halfStyle:before { / creates the 1/3 /
display:block;
z-index:2;
position:absolute;
:0;
height: 33.33%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #f00; / for demo purposes /
text-shadow: 2px -2px 0px #fa0; / for demo purposes /
}
.halfStyle:after { / creates the middle 1/3 /
display:block;
position:absolute;
z-index:1;
:0;
height: 66.66%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #000; / for demo purposes /
text-shadow: 2px 2px 0px #af0; / for demo purposes /
}

.halfStyle { / base char and also the right 1/3 /
position:relative;
display:inline-block;
font-size:80px; / or any font size will work /
color: transparent; / hide the base character /
overflow:hidden;
white-space: pre; / to preserve the spaces from collapsing /
color: #f0f; / for demo purposes /
text-shadow: 2px 2px 0px #0af; / for demo purposes /
}
.halfStyle:before { / creates the left 1/3 /
display:block;
z-index:2;
position:absolute;
:0;
width: 33.33%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #f00; / for demo purposes /
text-shadow: 2px -2px 0px #af0; / for demo purposes /
}
.halfStyle:after { / creates the middle 1/3 /
display:block;
z-index:1;
position:absolute;
:0;
width: 66.66%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow:hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #000; / for demo purposes /
text-shadow: 2px 2px 0px #af0; / for demo purposes /
}