HTML5----CSS display half characters

The basic idea of CSS display with half characters is as follows:

It is a single word written twice, showing half of each word. Here we need to use the CSS pseudo elements: before AND: after. Remember the "pseudo" word of this "pseudo element", which indicates that it does not exist. Our method is to place the same characters in the pseudo element and display only half, while the original character shows the other half, and finally splice them into one word.

:

CSS:

<Style type = "text/css">. halfStyle {position: relative; display: inline-block; font-size: 100px;/* any width can be */color: black;/* any color, or transparent */overflow: hidden; white-space: pre;/* processing space */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 ); /* Dynamically Retrieve pseudo elements */overflow: hidden; color: # f00 ;}</style>

HTML:

<Span class = "halfStyle" data-content = "to"> to </span> <span class = "halfStyle" data-content = "this"> This </span> <span class = "halfStyle" data-content = "1"> 1 </span> <span class = "halfStyle" data-content = ""> game </span>