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

Editor to share with you how to use pseudo elements in CSS:: before and:: after, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

What are:: before and:: after?

:: before and:: after can be added to the selector to create keywords for pseudo elements. The pseudo element is inserted before or after the content of the element that matches the selector.

Content attribute

1):: before and:: after are unique content that are used to add content to the logical head or tail of an element in css rendering.

2):: before and:: after must be used with the content attribute, content is used to define the content to be inserted, and content must have a value, at least empty

3) these additions will not appear in DOM, will not change the content of the document, cannot be copied, but will only be added in the css rendering layer. So don't use: before or: after to show meaningful content, try to use them to display decorative content

The following values are available for content:

String

Wrap a string in quotation marks to add a string to the content of the element

P::before {content: ""; color:#000000;} p::after {content: ""; color:#000000;}

JavaScript advanced programming

Attr ()

Call the attributes of the current element through attr (), such as displaying the alt prompt text of the picture or the href address of the link.

A::after {content: '→' attr (href); / * display an arrow before href * /} Baidu address

A::after {content: "[" attr (href) "];} Baidu address

Url () / uri ()

Used to reference media files. For example: "Baidu" gives a picture in front of it, followed by a href attribute.

A::before {content: url ("img/baidu_jgylogo3.gif");} a::after {content: "(" attr (href) ");} Baidu address

Be careful

1) URL cannot use quotation marks. If you enclose the URL in quotation marks, it becomes a string and inserts the text "url (image.jpg)" as its content, not the image itself.

2) content attribute, use the picture directly, even if you write width,height, you can't change the size of the picture.

Solution: if you want to solve this problem, write content:'' blank and use background:url () to add pictures.

/ * pseudo element add picture: * / .wrap:after {/ * content is left empty * / content: "; / * set background image and stretch * / background:url (" img/06.png ") no-repeat center; / * must set this pseudo element display*/ display:inline-block; / * must set this pseudo element size (will not be stretched by the picture) * / background-size:100%; width:100px Height:100px;} copy the code

3) Apple pseudo-elements do not work, img, input and other single tags do not have: after and: before pseudo-elements (not found in some browsers, such as: Apple will find invalid), because a single tag itself cannot have child elements.

Solution: give img a div to solve the problem.

4) if you want to dynamically change the pseudo-element picture, you can add the basic style of the pseudo-element picture to the current element, and then dynamically class to write the pseudo-element picture.

Application of:: before and:: after

Used with the quotes property

Add parentheses

H2 {quotes: "(")"; / * use the quotes attribute of the element to specify the text symbol * /} h2::before {content:open-quote;} h2::after {content:close-quote;} to bracket the title

Add quotation marks

H3 {quotes: "\"\"; / * double quotation marks are escaped * /} h3::before {content:open-quote;} h3::after {content:close-quote;} enclose the title in quotation marks

Do not specify, default

H4::before {content:open-quote;} h4::after {content:close-quote;} does not set quotes

Decorative title

H2 {display: grid; grid-template-columns: minmax (50px, 1fr) auto minmax (50px, 1fr); align-items: center; text-align: center; gap: 40px;} h2::before, h2::after {content:'; border-top: 6px double;} title

The layout is achieved by changing the element into three columns. The left and right columns are double lines with widths of minmax (50px, 1fr), which means that their matching widths are never less than 50px. The title text is neatly centered.

Ribbon title

H2 {position: relative; margin: 0 auto 20px; padding: 10px 40px; text-align: center; background-color: # 875e46;} h2::before, h2::after {content:'; width: 80px; height: 100%; background-color: # 724b34; / * locate the shape of both ends of the ribbon and place it at the bottom * / position: absolute; z-index:-1; top: 20px / * shape of both ends of the ribbon * / clip-path: polygon (00,100,100%, 0100%, 0100%, 2550%); / * draw and locate the shadow triangle of the ribbon * / background-image: linear-gradient (45deg, transparent 50%, # 5d3922 50%); background-size: 20px 20px; background-repeat: no-repeat; background-position: bottom right;} h2::before {left:-60px } h2::after {right:-60px; transform: scaleX (- 1); / * horizontal flip * /}-title

Achieve more realistic shadows

.box {margin:10px;width:300px;height:100px;border-radius:10px;background:#ccc} .shadow {position:relative;max-width:270px;box-shadow:0 1px 4px rgba, 00 20px rgba:: after,.shadow::before {position:absolute;z-index:-1;content: ""} .shadow:: after,.shadow::before {position:absolute;bottom:15px;left:10px;z-index:-1 Width:50%;height:20%;content: ""} .shadow:: after,.shadow::before {position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;box-shadow:0 15px 10px rgba; content: "; transform:rotate (- 3deg)} .shadow:: after {right:10px;left:auto;transform:rotate (3deg)}

Replace content

In some cases, content may not use:: before or:: after. If content is set to a single image, you can use it directly on the element to replace the HTML content of that element.

For example, there are three contents on the page:

After adding the replace class

.replace {content: url (img/replace.png);}

1) elements with simple text. It will be replaced.

2) A containing

The elements in it. It will also be replaced.

3)

Directly an element. Firefox will not replace it, but other browsers will.

Clear float

Method 1:

.classic-clearfix::after {content:'; display: block; clear: both;}

Method 2:

. modern-clearfix {display: flow-root;}

Simulate the effect of float:center

Float does not have the value of center, but it can be simulated through pseudo-classes.

Principle: left and right through:: before float each set aside the location of half of the picture, and then absolutely locate the picture.

Body {font: 14px/1.8 Georgia, serif;} # page-wrap {width: 60%; margin: 40px auto; position: relative;} # logo {position: absolute; top: 0; left: 50%; margin-left:-125px;} # l, # r {width: 49%;} # l {float: left;} r {float: right;} # l:before, # r:before {content: "; width: 125px; height: 250px;} # l:before {float: right } # r:before {float: left;}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

The above is all the content of this article entitled "how to use pseudo elements:: before and:: after in CSS". 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.