Use fake elements before and after to create gorgeous effects
A pseudo-element is a page element that doesn’t exist. It doesn’t exist in the HTML code, but you can see it in action when the page is displayed. This article focuses on the common usage scenarios of pseudo-elements beforce and After.
CSS :before selector
Definition and description: The before selector inserts content before the selected element. Use the content property to specify what to insert.
CSS: After selector
Definition and description: The after selector inserts content after the selected element. Use the content property to specify what to insert.
These two pseudo-elements insert an extra element before and after the real page element, and are technically equivalent to the following HTML tags.
1. Pseudo-aperture
<div class="hover-circle">CSS</div>
Copy the code.hover-circle {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%; font-size: 3rem; letter-spacing: 0.3 rem; font-weight: bold; position: relative; cursor: pointer; color: # 666; } .hover-circle::before { width: 8.5 rem; height: 8.5 rem; border: 3px solid pink; content: ""; border-radius: 50%; position: absolute; opacity: 0; } .hover-circle::after { width: 7.2 rem; height: 7.2 rem; border: 6px solid pink; content: ""; border-radius: 50%; position: absolute; opacity: 0; } .hover-circle:hover::before..hover-circle:hover::after { animation-duration: 0.8 s; animation-delay: 0.2 s; animation: circle 0.8 s; } @keyframes circle { 0% { opacity: 0; scale: 1; } 25% { opacity: 0.25; } 50% { opacity: 0.5; scale: 1.03; } 75% { opacity: 0.75; } 100% { opacity: 1; scale: 1.03; } } Copy the code2. Pseudo-class parenthesis effect
<div class="hover-text">CSS</div>
Copy the code.hover-text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%; font-size: 3rem; letter-spacing: 0.3 rem; font-weight: bold; position: relative; cursor: pointer; color: # 666; } .hover-text::before { content: "["; position: absolute; left: 0.8 rem; opacity: 0; color: # 999; } .hover-text::after { content: "]"; position: absolute; right: 0.8 rem; opacity: 0; color: # 999; } .hover-text:hover::before { animation-duration: 0.8 s; animation-delay: 0.2 s; animation: hovertext1 0.8 s; } .hover-text:hover::after { animation-duration: 0.8 s; animation-delay: 0.2 s; animation: hovertext2 0.8 s; } @keyframes hovertext1 { 0% { opacity: 0; left: 0.8 rem; } 100% { opacity: 1; left: 0.5 rem; } } @keyframes hovertext2 { 0% { opacity: 0; right: 0.8 rem; } 100% { opacity: 1; right: 0.5 rem; } } Copy the code3. Cool ribbon effect
Bilateral ribbon
<div class="tc">
<div class="title1"><span>There are 10 days to go</span></div>
</div>
Copy the code.title1 {
position: relative;
display: inline-block;
}
.title1 span { position: relative; z-index: 2; display: inline-block; padding: 0 15px; height: 32px; line-height: 32px; background-color: #dc5947; color: #fff; font-size: 16px; box-shadow: 0 10px 6px -9px rgba(0, 0, 0, 0.6); } .title1 span::before..title1 span::after { position: absolute; bottom: -6px; border-width: 3px 5px; border-style: solid; content: ""; } .title1 span::before { left: 0; border-color: #972f22 #972f22 transparent transparent; } .title1 span::after { right: 0; border-color: #972f22 transparent transparent #972f22; } .title1::before..title1::after { position: absolute; top: 6px; content: ""; border-style: solid; border-color: #dc5947; } .title1::before { left: -32px; border-width: 16px 26px 16px 16px; border-left-color: transparent; } .title1::after { right: -32px; border-width: 16px 16px 16px 26px; border-right-color: transparent; } Copy the codeOn the right side of the ribbon
<span class="title2">There are 10 days to go</span>
Copy the code.title2 {
position: relative;
display: inline-block;
padding: 0 15px;
height: 32px;
line-height: 32px; background-color: #dc5947; color: #fff; font-size: 16px; } .title2::before { position: absolute; top: -4px; left: 0; border-width: 2px 4px; border-style: solid; border-color: transparent #972f22 #972f22 transparent; content: ""; } .title2::after { position: absolute; top: 0; right: -8px; border-width: 16px 8px 16px 0; border-style: solid; border-color: #dc5947 transparent #dc5947 #dc5947; content: ""; } Copy the codeArrow ribbon
<span class="title3">There are 10 days to go</span>
Copy the code.title3 {
position: relative;
display: inline-block;
margin-right: 16px;
padding: 0 10px;
height: 32px; line-height: 32px; background-color: #dc5947; color: #fff; font-size: 16px; } .title3::before { position: absolute; top: 0; left: -16px; border-width: 16px 16px 16px 0; border-style: solid; border-color: transparent #dc5947 transparent transparent; content: ""; } .title3::after { position: absolute; top: 0; right: -16px; border-width: 16px 16px 16px 0; border-style: solid; border-color: #dc5947 transparent #dc5947 #dc5947; content: ""; } Copy the codeMultiple arrow ribbons
<div class="mt30 pl16">
<span class="title3">There are 10 days to go</span>
<span class="title3 ml5">There are 10 days to go</span>
<span class="title3 ml5">There are 10 days to go</span>
</div>
Copy the code.title4 {
width: 200px;
height: 140px;
position: absolute;
top: -8px;
left: -8px; overflow: hidden; } .title4::before { position: absolute; left: 124px; border-radius: 8px 8px 0 0; width: 16px; height: 8px; background-color: #972f22; content: ""; } .title4::after { position: absolute; left: 0; top: 124px; border-radius: 0 8px 8px 0; width: 8px; height: 16px; background-color: #972f22; content: ""; } .title4 span { display: inline-block; text-align: center; width: 200px; height: 40px; line-height: 40px; position: absolute; top: 30px; left: -50px; z-index: 2; overflow: hidden; -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); border: 1px dashed #fff; box-shadow: 0 0 0 3px #dc5947.0 14px 7px -9px rgba(0, 0, 0, 0.6); background-color: #dc5947; color: #fff; } Copy the codeHang tag
<div class="pr mt30" style="background-color: #eee; height: 200px;">
<div class="title4"><span>Hot Trends of enterprises</span></div>
<div class="title5"><span>Hot Trends of enterprises</span></div>
</div>
Copy the code.title5 {
width: 140px;
height: 200px;
position: absolute;
top: -8px;
right: -8px; overflow: hidden; } .title5::before { position: absolute; right: 124px; border-radius: 8px 8px 0 0; width: 16px; height: 8px; background-color: #972f22; content: ""; } .title5::after { position: absolute; right: 0; top: 124px; border-radius: 0 8px 8px 0; width: 8px; height: 16px; background-color: #972f22; content: ""; } .title5 span { display: inline-block; text-align: center; width: 200px; height: 40px; line-height: 40px; position: absolute; top: 30px; right: -50px; z-index: 2; overflow: hidden; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border: 1px dashed #fff; box-shadow: 0 0 0 3px #dc5947.0 14px 7px -9px rgba(0, 0, 0, 0.6); background-color: #dc5947; color: #fff; } Copy the code4. Geometry
triangle
<div class="triangle"></div>
Copy the code.triangle {
width: 0;
height: 0;
margin: 50px auto;
border-bottom: 100px solid #dc5947;
border-left: 50px solid transparent; border-right: 50px solid transparent; cursor: pointer; transform: scale(1.2); transition: 0.5 s; } Copy the codepentagram
<div class="pentagram"></div>
Copy the code.pentagram {
width: 0;
height: 0;
margin: 100px auto;
position: relative;
border-bottom: 70px solid #dc5947; border-left: 100px solid transparent; border-right: 100px solid transparent; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); -webkit-transform: scale(1), rotate(35deg); -moz-transform: scale(1), rotate(35deg); -ms-transform: scale(1), rotate(35deg); -o-transform: scale(1), rotate(35deg); transform: scale(1), rotate(35deg); } .pentagram::after { content: ""; width: 0; height: 0; border-bottom: 70px solid #dc5947; border-left: 100px solid transparent; border-right: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); transform: rotate(-70deg); position: absolute; top: 0px; left: -100px; } .pentagram::before { content: ""; width: 0; height: 0; border-bottom: 80px solid #dc5947; border-left: 30px solid transparent; border-right: 30px solid transparent; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg); position: absolute; top: -45px; left: -60px; } Copy the code5. Water droplets
<div class="drop"></div>
Copy the code.drop::after {
content: "";
position: absolute;
width: 30px;
height: 20px;
border-radius: 50%; background-color: #ace3ff; margin: 100px auto; top: -50px; left: 25px; box-shadow: 5px 12px 4px #ace3ff, -5px 11px 4px #ace3ff.0px 14px 4px #4d576e; -webkit-transform: rotate(35deg); } .drop::before { content: ""; position: absolute; width: 0px; height: 0px; border-style: solid; border-width: 0 40px 50px 40px; border-color: transparent transparent #ace3ff transparent; top: -30px; left: 10px; } .drop { width: 100px; height: 100px; border-radius: 50%; background-color: #ace3ff; position: relative; margin: 100px auto; box-shadow: 0px 6px 0 #3f475a; } Copy the code6. Gorgeous flowing border
<div class="box-line1"></div>
Copy the code.box-line2..box-line2::before..box-line2::after {
position: absolute;
top: 0;
bottom: 0; left: 0; right: 0; } .box-line2 { width: 200px; height: 200px; margin: auto; color: #69ca62; box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); } .box-line2::before..box-line2::after { content: ""; z-index: 99; margin: -5%; box-shadow: inset 0 0 0 2px; animation: clipMe 8s linear infinite; } .box-line2::before { animation-delay: -4s; } .box-line2:hover::after..box-line2:hover::before { background-color: rgba(255, 0, 0, 0.3); } @keyframes clipMe { 0%, 100% { clip: rect(0px, 220px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220px, 0px); } 50% { clip: rect(218px, 220px, 220px, 0px); } 75% { clip: rect(0px, 220px, 220px, 218px); } } @keyframes surround { 0%, 100% { clip: rect(0px, 220px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220px, 0px); } 50% { clip: rect(218px, 220px, 220px, 0px); } 75% { clip: rect(0px, 220px, 220px, 218px); } } .box-line1:before..box-line1:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ""; z-index: 99; margin: -5%; animation: surround linear infinite 8s; box-shadow: inset 0 0 0 2px #69ca62; } .box-line1:before { animation-delay: -4s; } .box-line1 { border: 1px solid #69ca62; position: absolute; left: 500px; top: 200px; margin: auto; width: 200px; height: 200px; margin: auto; } Copy the code7. The Tooltip
<div class="tip" data-tip=CSS pseudo-classes "">CSS pseudo-classes</div>
Copy the code.tip::after {
content: attr(data-tip);
display: none;
position: absolute;
padding: 5px 10px;
left: 15%; bottom: 100%; width: 150px; margin-bottom: 12px; transform: translateX(50%); font-size: 12px; background: # 000; color: #fff; cursor: default; border-radius: 4px; } .tip::before { content: ""; position: absolute; display: none; left: 15%; bottom: 100%; transform: translateX(50%); margin-bottom: 3px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid # 000; } .tip:hover::after..tip:hover::before { display: block; } Copy the code8.CSS pseudo-class box shadow
Use fake elements: Before and: After to create stunning photo shadows. The trick is to fix the pseudo-elements with absolute positioning and then give them a negative z-index to appear in the background.
<div class="box effect2">
<h3>CSS pseudo-class box shadow</h3>
</div>
Copy the code.effect2 {
position: relative;
}
.effect2::before..effect2::after {
z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: # 777; -webkit-box-shadow: 0 15px 10px # 777; -moz-box-shadow: 0 15px 10px # 777; box-shadow: 0 15px 10px # 777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .effect2::after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } Copy the code
9.Tabs Indicates the active status
<div class="sm-box flex">
<div class="menu-tabs active">Home page</div>
<div class="menu-tabs">news</div>
<div class="menu-tabs">video</div>
<div class="menu-tabs">The picture</div>
</div> Copy the code.menu-tabs {
display: block;
padding: 0.25 rem 1.5 rem;
clear: both;
font-weight: 400;
color: # 212529; text-align: inherit; white-space: nowrap; background-color: transparent; width: 50px; border: 0; height: 35px; justify-content: center; display: flex; cursor: pointer; } .menu-tabs:hover { color: #20a884; position: relative; } .menu-tabs:hover:after { position: absolute; content: ""; border: 1px solid #20a884; width: 3rem; left: 0; bottom: 0; margin-left: 50%; transform: translateX(50%);} .active { position: relative; color: #20a884; } .flex { display: flex; } .active::after { position: absolute; content: ""; border: 1px solid #20a884; width: 3rem; left: 0; bottom: 0; margin-left: 50%; transform: translateX(50%);} Copy the code10. Fake elements blur the background
<div class="container">
<div class="overlay">
<h1>A blurred overlay</h1>
<p>. mask or whatever <br>that is responsive and could be cross-browser compatible back to IE9</p>
</div> </div> Copy the code.container {
width: 100%;
height: 100%;
margin: 0;
}
.container..overlay:before { background: url(https://wow.techbrood.com/assets/landing.jpg) no-repeat fixed 0 0 / cover; } .container { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .overlay { max-height: 200px; margin: 0 auto; max-width: 768px; padding: 50px; position: relative; color: white; font-family: "Lato"; position: relative; text-align: center; z-index: 0; } .overlay:before { content: ""; -webkit-filter: blur(100px); filter: blur(100px); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } Copy the code11. Blue Lake Script
<span class="lanhu_text">
This site is supported by call me Zhan Dodok</span>
Copy the code.lanhu_text {
position: relative;
color: #2878ff;
}
.lanhu_text::before { content: ""; width: 80px; height: 20px; position: absolute; left: -86px; top: 0; background: url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAABCAYAAABJwyn/AAAAjElEQVQoU22NSw7CQAxDX8ahICF2HIDTcf9d1c8kaDpthQSL6CmxHRuk8cZfMxqf6 DGh+Y5uCxquaB7xdUCXilZHWvBorEiOaqAKrkRRUEmUOw283TKRRb9b4GnIEpWmGYrA237kDh1w6J5N7zzzZv13gtuvT7t++jefUTYmwvpk7v3fPaCzn//9L fsBvRpHnliu+xMAAAAASUVORK5CYII=)0 no-repeat; } .lanhu_text::after { content: ""; width: 80px; height: 20px; position: absolute; right: -86px; top: 0; background: url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAABCAYAAABJwyn/AAAAhElEQVQoU22OSw7CQAxDXzJDWbHiEFyRJQflFggJSjyDph9oC6snx45lO52rrKJqz IyNlkFUPv6vnv+3uW9vrPpBq77/uWFPAXnrnfYVQ16JiWq0stjvxKB9vDc/MeaXWo5cqDEFUkKpEuEoB3ollHvUZ9QV4rFD3R3d9ujwJK5HxAW9AStemAIOw CNlAAAAAElFTkSuQmCC)100% no-repeat; } Copy the code12 Main Headings
<div class="first-title">Service project</div>
Copy the code.first-title {
position: relative;
color: #a98661;
font-weight: 400;
font-size: 30px;
text-align: center; } .first-title::before..first-title::after { position: absolute; content: ""; width: 110px; border-bottom: 1px solid #a98661; top: 50%; transform: translateY(50%);} .first-title::before { left: 100px; } .first-title::after { right: 100px; } Copy the code13. Mask the floating layer with mouse
<div class="black-mask"></div>
Copy the code.black-mask {
position: relative;
height: 100%;
width: 100%;
cursor: pointer;
} .black-mask:hover { transition-duration: 1s; scale: 1.02; } .black-mask:hover:before { object-fit: cover; } .black-mask:hover:after { height: 100%; opacity: 1; transition-duration: 1s; display: flex; align-items: flex-end; padding: 0 30px 15px; } .black-mask::before { position: absolute; content: ""; background: url(https://dcdn.it120.cc/2019/11/14/f17c5848-6d1f-4254-b3ba-64d3969d16b6.jpg) no-repeat; background-size: 100% 100%; width: 100%; height: 100%; } .black-mask::after { position: absolute; content: "The fog rolled to and fro under the breeze, like ice peaks and snow mountains, like penglai fairyland, like a mirage, making people feel ethereal. The scenery of mountains and rivers becomes more beautiful under the decoration of fog. The seven mountains towering tall and straight in the distance, they seem to have become a fairy to live in baoshan, fascinating. A mist came from the pond nearby, and in the light of the rising sun it was red, orange, yellow, green, cyan, blue, and purple. ..."; width: 90%; height: 0%; bottom: 0; right: 0; z-index: 32; background: rgba(0, 0, 0, 0.3); opacity: 1; color: #fff; opacity: 0; padding: 0 30px 0; } Copy the code14. Brilliant aperture
<div class="aperture">The aperture</div>
Copy the code.aperture {
width: 136px;
height: 136px;
background-color: #dc5947;
border-radius: 50%;
line-height: 136px; text-align: center; color: #fff; font-size: 24px; cursor: pointer; position: relative; } .aperture::before { border: 3px dashed #a0ff80; content: ""; width: 144px; height: 144px; position: absolute; border-radius: 50%; left: -8px; top: -6px; animation: clockwise 5s linear infinite; } @keyframes clockwise { 100% { transform: rotate(360deg); } } Copy the code15. Colored flow border
<div class="rainbow"></div>
Copy the code.rainbow {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
border-radius: 10px; overflow: hidden; padding: 2rem; } .rainbow::before { content: ' '; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: # 399953; background-repeat: no-repeat; background-size: 50% 50%.50% 50%; background-position: 0 0.100% 0.100% 100%.0 100%; background-image: linear-gradient(# 399953, # 399953),linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); -webkit-animation: rotate 4s linear infinite; animation: rotate 4s linear infinite; } .rainbow::after { content: ' '; position: absolute; z-index: -1; left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); background: white; border-radius: 5px; } @keyframes rotate { 100% { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } Copy the code16. Cool pseudo-class borders
<div class="corner-button">CSS3</div>
Copy the code.corner-button::before..corner-button::after {
content: ' ';
position: absolute;
background: #2f2f2f;
z-index: 1;
transition: all 0.3 s; } .corner-button::before { width: calc(100% - 3rem); height: calc(101% + 1rem); top: -0.5 rem; left: 50%; -webkit-transform: translateX(50%); transform: translateX(50%);} .corner-button::after { height: calc(100% - 3rem); width: calc(101% + 1rem); left: -0.5 rem; top: 50%; -webkit-transform: translateY(50%); transform: translateY(50%);} .corner-button:hover { color: pink; } .corner-button { font-family: 'Lato', sans-serif; letter-spacing:.02rem; cursor: pointer; background: transparent; border: 0.5 rem solid currentColor; padding: 1.5 rem 2rem; font-size: 2.2 rem; color: #06c17f; position: relative; transition: color 0.3 s; text-align: center; margin: 5rem 12rem; } .corner-button:hover::after { height: 0; } .corner-button:hover::before { width: 0; } .bg-f2{ background: #2f2f2f; } Copy the code17. Pseudo-categories beautify the text
<div class="beautify-font" data-text='might hide'>Taking refuge</div>
<div class="beautify-font2" data-text='might hide'>Taking refuge</div>
Copy the code.beautify-font{
position: relative;
font-size: 12rem;
color: #0099CC
}
.beautify-font::before{ position: absolute; font-size: 12rem; color: # 333; content: attr(data-text); white-space:nowrap; width: 50%; display: inline-block; overflow: hidden; transition:1s ease-in-out 0s; } .beautify-font2{ position: relative; font-size: 6rem; color: #0099CC } .beautify-font2::before{ position: absolute; font-size: 6rem; color: # 333; content: attr(data-text); white-space:nowrap; height: 50%; display: inline-block; overflow: hidden; transition:1s ease-in-out 0s; } .beautify-font:hover::before{ width:0; } .beautify-font2:hover::before{ height: 0; } Copy the code18. Photo stacking effect
Is it possible to create a stack of images on top of each other using just one image? The key, of course, is to use the pseudo-elements :before and :after to aid rendering. Set the z-index of these pseudo-elements to negative values and let them work in background mode.
<div class="stackthree"><img src="./images/city.jpg"></div>
Copy the code.stackthree::before {
background: #eff4de;
}
.stackthree..stackthree::before..stackthree::after {
border: 6px solid #fff; height: 200px; width: 200px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); } .stackthree::before { top: 5px; left: -15px; z-index: -1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } .stackthree::after { top: -2px; left: -10px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .stackthree::before..stackthree::after { background: # 768590; content: ""; position: absolute; z-index: -1; height: 0px\9; width: 0px\9; border: none\9; } .stackthree { float: left; position: relative; margin: 50px; } Copy the codeFor element compatibility
Browsers recognize whether you use single colon or double colon syntax. Since IE8 only supports single colons, it’s safe to use single colons if you want to be IE8 compatible.
Use fake elements before and after to create gorgeous effects