This article starts with the simplest and explains how to understand and use:: before and:: after. Then apply it in the actual use scenario.
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 element content that matches the selector.
1.png
content attribute
1) The unique content under:: before and:: after is used to add content to the logical head or tail of the element in css rendering.
2) :: before and:: after must be used together with the content attribute. Content is used to define the inserted content. Content must have a value, at least empty
3) These additions will not appear in the DOM, will not change the document content, and cannot be copied. They are only added in the css rendering layer. So don't use: before or: after to show meaningful content. Try to use them to show decorative content
content can take the following values:
string
Wrapping a string in quotation marks adds a string to the element content
a.png
p::before{
content: "<";
color: #000000;
}
p::after{
content: ">";
color:#000000;
}
<p>JavaScript Advanced programming</p>
Copy code
attr()
Call the attributes of the current element through attr(), such as displaying the picture alt prompt text or the href address of the link.
a::after {
content: ' → ' attr(href); /* stay href Show an arrow before */
}
<a href="https://Www.baidu.com / "> Baidu address</a>
Copy code
b.png
a::after{
content: "[" attr(href) "]";
}
<a href="https://Www.baidu.com / "> Baidu address</a>
Copy code
url()/uri()
Used to reference media files. For example: "Baidu" gives a picture in front and href attribute in the back.
a::before{
content: url("img/baidu_jgylogo3.gif");
}
a::after{
content:"("attr(href)")";
}
<a href="https://Www.baidu.com / "> Baidu address</a>
Copy code
be careful
1) URLs cannot use quotation marks. If you enclose a URL in quotation marks, it will become a string and insert the text "url(image.jpg)" as its content, not the image itself.
2) content attribute, which directly uses the picture. Even if width and height are written, the picture size cannot be changed;
Solution: if you want to solve this problem, you can write content: '' empty and use background:url() to add pictures
/*Pseudo element add picture:*/
.wrap:after{
/*The content is left blank*/
content:"";
/*Set the background image and stretch it*/
background:url("img/06.png") no-repeat center;
/*This pseudo element display must be set*/
display:inline-block;
/*This pseudo element size must be set (it will not be opened by the picture)*/
background-size:100%;
width:100px;
height:100px;
}
Copy code
3) The apple pseudo element does not take effect. img, input and other single tags do not have: after and: before pseudo elements (not in some browsers, for example, Apple will find it invalid), because the single tag itself cannot have child elements.
Solution: give the img package 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 write the pseudo element picture dynamically.
Application of:: before and:: after
Used with the quotes attribute
Bracketed
h1{
quotes:"(" ")"; /*Use the quotes attribute of the element to specify the text symbol*/
}
h1::before{
content:open-quote;
}
h1::after{
content:close-quote;
}
<h1>Parenthesize the title</h1>
Copy code
quote
h2{
quotes:"\"" "\""; /*Add double quotes to escape*/
}
h2::before{
content:open-quote;
}
h2::after{
content:close-quote;
}
<h2>Quote the title</h2>
Copy code
Not specified, default
h3::before{
content:open-quote;
}
h3::after{
content:close-quote;
}
<h3>Not set quotes</h3>
Copy code
Decorative title
2.png
h1 {
display: grid;
grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
align-items: center;
text-align: center;
gap: 40px;
}
h1::before, h1::after {
content: '';
border-top: 6px double;
}
<h1>title</h1>
Copy code
The layout is realized by changing the < H1 > elements into 3 columns. The left and right columns are double lines and the width is minmax(50px, 1fr), which means that their matching width is always no less than 50px. The title text is neatly centered.
Ribbon title
3.png
h1 {
position: relative;
margin: 0 auto 20px;
padding: 10px 40px;
text-align: center;
background-color: #875e46;
}
h1::before, h1::after {
content: '';
width: 80px;
height: 100%;
background-color: #724b34;
/* Position the shapes at both ends of the ribbon and place it at the bottom */
position: absolute;
z-index: -1;
top: 20px;
/* Shape at both ends of the ribbon */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);
/* Draw and position 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;
}
h1::before {
left: -60px;
}
h1::after {
right: -60px;
transform: scaleX(-1); /* Flip horizontally */
}
---------------------------
<h1>title</h1>
Copy code
Achieve more realistic shadows
image.png
.box{margin:10px;width:300px;height:100px;border-radius:10px;background:#ccc}
.shadow{position:relative;max-width:270px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset}
.shadow::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(0,0,0,.7);content:"";transform:rotate(-3deg)}
.shadow::after{right:10px;left:auto;transform:rotate(3deg)}
<div class="box shadow"></div>
Copy code
replace content
In some cases, content can 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 the element.
If there are three contents on the page:
5.png
After adding the replace class
.replace {
content: url(img/replace.png);
}
Copy code
6.png
1) Element with simple text. It will be replaced.
2) An element containing < img > in it. It will also be replaced.
3) < img > directly an element. Firefox won't replace it, but other browsers will.
Clear float
Mode 1:
.classic-clearfix::after {
content: '';
display: block;
clear: both;
}
Copy code
Mode 2:
.modern-clearfix {
display: flow-root;
}
Copy code
7.png
Simulate the effect of float:center
float does not have the value of center, but it can be simulated and implemented through pseudo classes.
Principle: left and right pass:: before float, respectively set aside half the position of the picture, and then position the picture absolutely.
d.png
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; }
<div id="page-wrap">
<img src="img/cat.jpg" id="logo">
<div id="l">
<p>
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
</p>
</div>
<div id="r">
<p>
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
</p>
</div>
</div>
Copy code