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

  • ::beforeThe pseudo element is absolutely positioned, sets the background color of the change, and sets scaleY(0) to make it invisible;
  • Set up thetransform-originEnsure the orientation of wipe animation;
  • Set pseudo elements while hoveringscaleY(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 asbackground-imageIs linear gradient (by parameter control into pure color);
  • throughbackground-sizeSet to 0% 100% to hide linear gradient (actually solid color);
  • Set when the mouse is hoveringbackground-sizeFor 100% 100% appear passbackground-imageLinear 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