1. use a selector to insert content: for example, H2: Before {content: 'column'; color: White; Background-color: orange; padding: 1px 5px;} 2. the specified element is not inserted. For example, h2.sample. before {content: none;} -- indicates that no content is inserted for the class in H2 as the sample -- 3. insert an image using a selector: example, H2: Before {content: url(mark.png);} 4. insert a project number using the content attribute: Add a continuous number before multiple titles: Use the counter attribute in the content attribute to append a continuous number to multiple projects, you also need to append the Counter-increment attribute of the element to the element style. To use continuous numbers, you need to set the value of the counter-increment attribute to the before selector or after The counter name specified in the counter attribute value of the selector. For example, H1: Before {content: Counter (mycounter);} H1 {counter-increment: mycount;} 5. append a text in the Project Number: example, H1: Before {content: 'counter (mycounter) ';} specify the type of the number: Content: Counter (counter name, number Type) Upper-Roman: upper-case Rome letter upper-Alpha: upper-case letter number nesting: numbers can be nested in a large number and nested in a small number. Large No.: H1: Before {content: Counter (mycounter);} H1 {counter-increment: mycounter;} medium No.: H2: Before {content: Counter (subcounter );} h2 {counter-increment: subcounter;} in this case, the title number is continuous. If you want to re-start the number in the second title, you need to add the Counter-Reset attribute to the title. In this example, counter-Reset: subcounter 6. add nested text characters on both sides of the string: You can use the open-quote attribute value of the content attribute and the close-quote attribute value to add nested text symbols such as parentheses, single quotes, and double quotes on both sides of the string. The value of the open-quote attribute is used to add the starting nested text symbol, and the value of the close-quote attribute is used to add the ending nested text symbol. Note: to add double quotation marks, use the Escape Character. Example. Result:
