Shulou(Shulou.com)06/03 Report--

This article mainly explains "definition and usage of before in css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "in css: the definition and usage of before"!

: before pseudo element adds content before the element. This pseudo element allows the creator to insert the generated content at the front of the element's content. By default, this pseudo element is an inline element, but you can change this using the attribute display.

Definition and usage of before

: before pseudo-element inserts content in front of the selected element

The before pseudo element generates a pseudo element that contains the generated content before the content placed in the element

Use the content property to specify what to insert.

Pseudo-elements are not really displayed in dom, they are not real elements, and many mobile devices do not support them, so pseudo-elements are not recommended in many critical places.

Browser support

IE8+ (6 and 7 explode weakly)

Chrome2.0+

Firefox 3.5 +

An example of before

This style plays a sound before each H2 element:

H2:before {content:url (beep.wav);}

CSS2 -: before pseudo element

Before pseudo-elements can be used to insert something before an element.

Before pseudo elements can be added to any element, such as text, video, pictures, etc.

The following styles play audio before the title:

H2:before {content:url (beep.wav);}

The following style adds the string content before the title. Note that content needs to be enclosed in quotation marks.

H2:before {content: "content";}

The following style adds a picture in front of the H2 title.

H2:before {content:url (XXX.jpg);}

CSS2 -: after pseudo element

The after pseudo-class can be used to insert something after an element.

The following style plays audio after the title:

H2:after {content:url (beep.wav);}

At this point, I believe you have a deeper understanding of "css: the definition and usage of before". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.