Use new CSS techniques to reduce the use of fake elements
A pseudo-element is a keyword appended to the end of a selector that allows you to style specific parts of the selected element.
The pseudo-elements ::first-letter and ::first-line were introduced in CSS1. The most common pseudo-elements ::before and :: After were introduced in CSS2. They don’t actually exist in the document tree. As the first and last child of the selected element, they are often used to add additional decorative elements without disturbing the document itself.
Use new technology wisely
In the past, we often worry about compatibility problems, but now the mainstream browsers for CSS3 support is more and more perfect, MOST of the CSS3 features have a good browser support, Microsoft will basically eliminate IE browser, from June 15 next year to suspend support.
This gives us the freedom and flexibility to explore new CSS technologies and achieve the same style effects without using pseudo-elements. By reducing the reliance on pseudo-elements, some scenarios can write less CSS code, reducing nested elements and cascading context issues.
To give you a few 🌰
Gradient border
You can use gradient borders to make modules stand out throughout the page:
Pseudo-element mode
Style the pseudo-element with a gradient background and set z-index to negative so that the content area is above the gradient background. The content area needs a solid color background:
.gradient-box {
display: flex;
align-items: center;
width: 90%;
position: relative;
padding: 30% 2em;
box-sizing: border-box;
$border: 5px;
color: #FFF;
background: # 000;
background-clip: padding-box;
border: solid $border transparent;
&::before {
content: ' ';
position: absolute;
top: 0;
left: 0;
z-index: -1;
margin: -$border;
background: linear-gradient(to right, red, orange); }}Copy the code
Border – image way
Simpler syntax can be used to achieve the same effect:
border-image-slice: 1;
border-image-source: linear-gradient(to right, red, orange);
Copy the code
triangle
We often use ::before and ::after pseudo-elements to create regular shapes, and any search will turn up a number of related generator widgets, such as triangle generators:
Specific application scenarios are often not as simple as generating a triangle. Triangles are usually used as decoration, and then combined with specific shapes to form a whole, such as popups, information prompt boxes, arrow buttons, etc. Take the following as an example:
Pseudo-element mode
Use absolutely positioned ::before pseudo-elements to construct triangles. The disadvantage of this approach is that adding the :hover style requires modifying both. Tooltip and the background color of the pseudo-elements (this can also be solved with new CSS variables) :
.tooltip {
display: inline-block;
position: relative;
padding: 20px;
background: lightseagreen;
&::before {
$triangleHeight: 20px;
content: ' ';
position: absolute;
right: 30%;
bottom: -$triangleHeight;
border: 0 solid transparent;
border-width: 0 30px $triangleHeight 0;
border-color: transparent lightseagreen transparent transparent; }}Copy the code
Clip – path way
The clip-path attribute can be clipped and constructed from polygons:
.tooltip {
display: inline-block;
padding: 20px 20px 40px;
background: lightseagreen;
clip-path: polygon(0% 0%.100% 0%.100% 75%.75% 75%.75% 100%.60% 75%.0% 75%);
}
Copy the code
Clip-path also has related generator tools:
Wipe the animation
Wipe animation is a gradient animation of button hover:
Pseudo-element mode
::before
The pseudo element is absolutely positioned, sets the background color of the change, and sets scaleY(0) to make it invisible;- Set up the
transform-origin
Ensure the orientation of wipe animation; - Set pseudo elements while hovering
scaleY(1)
Unfold from the bottom up:
.wipe {
position: relative;
background: #1e7a90;
&::before {
content: ' ';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
transform: scaleY(0);
transform-origin: bottom center;
transition: transform ease-in-out 300ms;
}
&:hover{&::before {
transform: scaleY(1); }}}Copy the code
Use background-size
- Sets background-color to the default background color, as well as
background-image
Is linear gradient (by parameter control into pure color); - through
background-size
Set to 0% 100% to hide linear gradient (actually solid color); - Set when the mouse is hovering
background-size
For 100% 100% appear passbackground-image
Linear gradients of control:
.wipe {
background-color: #1e7a90;
background-image: linear-gradient(0, white, white);
background-size: 0% 100%;
background-repeat: no-repeat;
transition: all ease-in-out 300ms;
&:hover {
background-size: 100% 100%; }}Copy the code
Translucent layer
A translucent solid color overlay on an image is a common design pattern in website construction:
Pseudo-element mode
Create a translucent mask layer with pseudo-element ::before:
.banner {
position: relative;
background: url(val(--bgImg)) no-repeat center center;
&::before {
content: ' ';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 70%); }}Copy the code
Background – blend mode
The background-blending-mode attribute defines the blending mode of the background layer (background-image and background-color) :
.banner {
background: rgb(0 0 0 / 70%) url(val(--bgImg)) no-repeat center center;
background-blend-mode: overlay;
}
Copy the code
Gaussian fuzzy local mask
The Gaussian blur/ground glass effect not only accentuates the local content, but also contributes to visual embellishes and gives the image and the whole module a more hierarchical sense. For example, it enables visual consistency and coordination between image presentation and text introduction without being too obtrusive:
Pseudo-element mode
Create a new mask layer with pseudo-elements and apply gaussian blur() to the output image:
.description {
position: relative;
&::before {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(XX) no-repeat center bottom;
background-size: 100% auto;
filter: blur(10px); }}Copy the code
Backdrop – filter method
Backdrop – filter area behind the content of the current element is to make the fuzzy gray or highlighting, want to see the effect, need the element itself translucent or fully transparent. You can use this property to achieve the same effect:
.description {
backdrop-filter: blur(10px);
}
Copy the code
conclusion
Although the front-end technology started relatively late but the speed is far more than expected, there are many old ways to achieve the code scheme, can use the new CSS technology to render the same effect, and the code is more streamlined and easy to maintain, we come together to discuss more fun new scheme (FLYING, ‘) FLYING
reference
Reducing The Need For Pseudo-Elements – Smashing Magazine
7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS
Gradient Borders in CSS
backdrop-filter – CSS: Cascading Style Sheets | MDN