Use css to set a half-text style code example, css style code

Use css to set a half-text style code example, css style code

Sample Code for setting a half-text style using css:
Generally, when you set the text style and effect, the entire text will be effective. For example, if you set the color of the text, the entire text will change color, the following describes how to set a specified style for a part of the text, hoping to provide some help to friends in need.
The Code is as follows:

<! DOCTYPE html> 
The above Code meets our requirements. Only half of the text in the string is set to Red. The following describes how it works.
I. Implementation principle:
The effect looks dazzling. In fact, the principle is very simple. It is used in combination with the before pseudo element selector and the content attribute to add a pseudo element to the span element, at the same time, set the element content to the data-content attribute value of the span element, and set it to absolute positioning so that it overwrites the original span element, with the width half of the original span element, then we set the font color in the element to meet our requirements. It looks like a text, but it is actually a combination of two texts.
Ii. Related reading:
1. For details about before, see section before/E: before, a pseudo-object selector of CSS.
2. For details about the content attribute, see the content attribute section of CSS.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 14781.
For more information, see: http://www.softwhy.com/divcss/