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

This article mainly shows you "in css:: how to use before", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "in css:: how to use before" this article.

Html Code:

Images inserted with:: before pseudo elements cannot be resized, they will be inserted as is, so you must resize the image before using it.

Images inserted with:: before pseudo elements cannot be resized, they will be inserted as is, so you must resize the image before using it.

Images inserted with:: before pseudo elements cannot be resized, they will be inserted as is, so you must resize the image before using it.

Css Code:

P.note {

Font-style:italic

Color:grey

}

P.note::before {

Content: "Note:"

Color:red

}

Effect picture:

1.jpg

In the above code snippet, we use the class .note to style the text paragraph. Using the:: before pseudo element, the string "Note:" is inserted for each paragraph. In this case, all you have to do is give any text paragraph defined as a .note class, and use CSS to set the style, and the paragraph will automatically add a prefix "Note:".

2. Content:counter ()

:: before content can also be counter (). Appears as a counter function, and counter () or counters () is used for the style list.

3. Content: "

:: before content can still be left blank. Empty pseudo-elements can be used to clear floating-point numbers in elements. For example, use:: before and:: after to clear floats.

4.:: before pseudo elements set style

:: before pseudo-elements can be styled like any other content, such as floating, positioning, or even animating. (note: animated pseudo elements cannot be used in all browsers. For more information, see the browser support section below. )

Comprehensive example: create geometry-eight o'clock star

The effect picture is as follows:

2.jpg

Html Code:

Css Code:

.container {

Margin:40pxauto

Max-width:700px

}

.element {

Width:200px

Height:200px

Background-color:#009966

Opacity:.8

Position:relative

Margin:100pxauto

}

Define a square with a background color of # 009966 in the .element class, providing the first four points for the geometry.

Use the `opacity` attribute to make the element and its pseudo elements translucent to better visualize their position in the presentation. By removing the opacity value, we can see the completely opaque eight-point star.

.element: before {

Position:absolute

Content: ""

Display:block

Width:100%

Height:100%

Background-color:#009966

Opacity:.8

-webkit-transform:rotateZ (45deg)

Transform:rotateZ (45deg)

}

Style the pseudo element of the element to get the same height and width as its parent element (.element), position it absolutely at the top of its parent element, and then rotate 45 degrees to form an eight-point star.

The above is all the contents of the article "in css:: how to use before". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.