Method of using CSS pseudo element to make text part color change

Ideas

The idea is very simple, is a word to write two times, a word only show part, but can not really write a word two times. Here you need to use CSS pseudo elements: Before and: After, remember this "pseudo element" of the word "pseudo", that it was not there. Our approach is to place the same character in the pseudo element, showing only half of it, while the original character shows the other half, and finally they are spelled into a word.
CSS Code

CSS code copy content to clipboard

1. . HF {
2. Display:inline-block;
3. font-size:80px;
4. line-height:80px;
5. Color: #000;
6. position:relative;
7. Overflow:hidden;
8. whitewhite-space:pre;/* Processing Space * *
9. }
10. . hf:before {
11. Position:absolute;
12. left:0;
13. top:0;
14. Color: #f00;
15. Display:block;
16. width:30%;/* If you want to change half the text, set the 50%*/
17. Content:attr (data-content)//* pseudo element dynamic gain content * *
18. Overflow:hidden;
19. }

HTML Code

xml/html code to copy content to clipboard

1. <span class= "HF" data-content= "W" >W</span>
2. <span class= "HF" data-content= "E" >e</span>
3. <span class= "HF" data-content= "B" >b</span>
4. <span class= "HF" data-content= "front" > Front </span>
5. <span class= "HF" data-content= "End" > End </span>

Demo

Attached: W3school: Before and: after pseudo element explanation

CSS2-: Before pseudo element

The ": Before" pseudo element can insert new content before the content of the element.

The following example inserts a picture before each

CSS code copy content to clipboard

1. H1:before
2. {
3. Content:url (logo.gif);
4. }

Give it a shot yourself.
CSS2-: After pseudo element

After the pseudo element can insert new content after the element's contents.

The following example inserts a picture after each

CSS code copy content to clipboard

1. H1:after
2. {
3. Content:url (logo.gif);
4. }

Try it yourself