Some rare use cases for CSS pseudo-elements

My tips for the front end are csS-Tricks

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

Pseudo-elements have been in use for a long time. However, I think there are some use cases that not all developers are fully aware of. I wrote this article to clarify them so that they can be used more often.

Parent-child hover effects

Because the pseudo-element belongs to its parent, there are some unusual use cases. Now, let’s look at a simple example.

This design has a section title with a small circle to the left of it. When we hover over section title, the circle becomes larger.

.section-title:before {
    content: ""; width: 20px; height: 20px; background: blue; /* Other styles */}.class-title :hover:before {transform: scale(1.2); }Copy the code

Simple and straightforward, we then extend this concept to more useful use cases.

Project/blog group

On my website, there is a section that lists all the project names. I want to add a thumbnail for each project, but that’s not the most important thing for me. More important to me is the link itself. I first saw this effect on the Ethan Marcotte website not long ago.

The design model above shows the idea I want to apply. Each colored link in a paragraph has a pseudo-element paired with it.

HTML

<section class="hero"> <p>Hello, My name is Ahmad. I'm a UX Designer and Front End Developer that enjoys the intersection between design and code write on <a href="www.ishadeed.com" class="link-1">ishadeed.com</a> and <a href="www.a11ymatters.com" class="link-2">a11ymatters.com</a> on CSS, UX Design and Web Accessibility.</p>
</section>
Copy the code

1. Add padding to the Hero element

I wanted to save space for pseudo elements, so adding padding was a solution.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

2. Absolutely locate the pseudo-elements

To locate them absolutely, I need to define which parent class is relative. It should be added to hero.

Note the position in the following GIF: how position: relative in the.hero section affects the pseudo-element.

3. Add fake elements

The final step is to add the pseudo-element and its hover effect:

.link-1 {
  color: #854FBB;
}

@media (min-width: 700px) {
  .link-1:after {
    content: ""; position: absolute; right: 0; top: 20px; width: 150px; height: 100px; background: currentColor; Opacity: 0.85; The transition: 0.3 s ease - out; } .link-1:hover { text-decoration: underline; }. Link-1 :hover:after {transform: scale(1.2); opacity: 1; }}Copy the code

Notice that I used currentColor as the pseudo-element background color. If you don’t know this keyword, it inherits the color value of its parent element. So any time I want to change the color of the link, it’s easy to just change it once.

Codepen. IO /shadeed/pen…

Increases the size of the clickable area

By adding a pseudo-element to the link, the clickable area around the link becomes larger. This is very useful and will enhance the user experience. Let’s take an example:

In addition, it can be used to extend the clickable area of the card component, which has the ability to view more links. Note that the content of the article, such as the title and image, will be above the pseudo-element, so it will not affect the selection of the text or the saving of the image.

overlay

If you have an element with a background image and a gradient overlay in the design, and the blend mode is set to color, pseudo-elements can help you.

.hero {
  position: relative;
  height: 300px;
  background: url("image.jpg") center/cover;
}

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #851717 0%, #30328C 100%);
  mix-blend-mode: color;
}
Copy the code

Codepen. IO /shadeed/pen…

The shadow of the parcel

In the past, I’ve created a shadow that slants at the edges. It has a subtle effect. Guess what! They can be implemented using pseudo-elements.

Create the element

A div element is created using the following general style.

.elem {
     position: relative;
     display: flex;
     align-items: center;
     max-width: 400px;
     background: #fff;padding: 2rem 1rem; The font - size: 1.5 rem; margin: 2rem auto; text-align: center; box-sizing: border-box; }Copy the code

Adding pseudo-elements

I then added :before and :after pseudo-elements for each element, which are 50% wide (I added a different background for each element for a better demonstration)

.elem:before,
.elem:after {
    content: "";
    position: absolute;
    top: 2px;
    width: 50%;
    height: 100%;
}

.elem:before {
    left: 0;
    background: grey;
}

.elem:after {
    right: 0;
    background: # 000;
}
Copy the code

Next, add transform: Skew (x), where x is 2 degrees. For one of these, X should be negative to achieve the desired effect.

Next, I add z-index: -1 to each pseudo-element to move it after its parent.

When complete, perform the following operations:

addfilter: blur
Reduce transparency
Added a gradient from transparent to black (to hide the edge of the pseudo-element in the top center of its parent)

The final code

.elem {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 400px;
  background: #fff;padding: 2rem 1rem; The font - size: 1.5 rem; margin: 2rem auto; text-align: center; box-sizing: border-box; } .elem:before, .elem:after { content:"";
    position: absolute;
    top: 3px;
    width: 50%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, # 000);
    filter: blur(3px);
    opacity: 0.3;
}

.elem:before {
    left: 0;
    transform: skewY(-2deg);
}

.elem:after {
    right: 0;
    transform: skewY(2deg);
}
Copy the code

Another option is to swap skewY values between pseudo-elements :before and :after.

Codepen. IO /shadeed/pen…

:after VS :before

In a recent Twitter discussion, I learned that it’s best to use :before instead of :after. Why is that? Because using :after might require us to add z-indexes to other nested elements so that the pseudo-elements don’t overlap with them. Let’s take a real example.

This is a simple card made up of thumbnails and a caption. Notice that there is a gradient overlay underneath the text to make the text clearer, in case the thumbnail is too light.

<article class="card">
  <img src="article.jpg" alt="">
  <h2>Title here</h2>
</article>

Copy the code

To add a gradient overlay underneath the text, I will need to use pseudo-elements. Which one would you choose? : before or after? So let’s see.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

1. After elements

In this case, the title will appear below the pseudo-element overlay diagram, as follows:

The solution is to add z-index to the card title. Even if it’s a quick and easy solution, it’s not the right thing to do.

.card-title {
    /*Other styles*/
    z-index: 1;
}
Copy the code

2. Before elements

This is used by default when using the :before element! You do not need to add z-index to the card title. The reason is that when :before is used, the element does not appear above the other siblings, whereas when :after is used, it appears above the other siblings.

Codepen. IO /shadeed/pen…

Link styles based on file extensions

For example, if you have a link that contains a PDF file, you can add a PDF icon to make it clearer to the user.

Is there an example of how to display the linked PDF icon

HTML

<p><a href="example.pdf">Download PDF</a></p>
<p><a href="example.doc">Download Doc</a></p>
Copy the code

CSS

a[href$=".pdf"]:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 18px;
  height: 18px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/np_pdf_377198_000000.svg) center/20px no-repeat;
  padding: 3px;
}
Copy the code

Codepen. IO /shadeed/pen…

Dividing line

In this example, there is a separator with “or”. There’s a line on each side. This can be done using pseudo-elements and Flexbox.

HTML

<p>Or</p>
Copy the code

CSS

p {
  display: flex;
  align-items: center;
}

p:before, p:after {
  content: "";
  height: 2px;
  background: #c5c5c5;
  flex-grow: 1;
}

p:before {
  margin-right: 10px;
}

p:after {
  margin-left: 10px;
}
Copy the code

Codepen. IO /shadeed/pen…

Original: www.sitepoint.com/hide-elemen…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.

Some rare use cases for CSS pseudo-elements

Parent-child hover effects

Project/blog group

1. Add padding to the Hero element

2. Absolutely locate the pseudo-elements

3. Add fake elements

Increases the size of the clickable area

overlay

The shadow of the parcel

Create the element

Adding pseudo-elements

:after VS :before

1. After elements

2. Before elements

Link styles based on file extensions

Dividing line

communication

Related Posts

Formatting Context (FC)

React-hooks +TS Implement the rC-field-form

JS deep copy native Terminator structuredClone API