AtoZ CSS Screencast: CSS Pseudo Elements

Core points

• CSS pseudo-elements are elements on the page that are not present in HTML code, and they can be operated using any CSS style applied to other elements.
The
• and :before pseudo-elements in :afterCSS can be used to generate page content, including text, images, attribute values, and counters. They can also be used to create complex shapes with minimal marking.
• The various pseudo-elements in CSS include :first-line, :first-letter, :selection, :before, :after and
. These can be used to style specific parts of an element, insert content before and after the content of an element, and style the first letter or first line of a block-level element, etc.

Video Explanation

(Loading in the player...) This video is part of the AtoZ CSS series. You can find other content in the series here.

Text record

The CSS pseudo-element is an element on the page that does not appear in HTML code.

They can be operated with any CSS style applied to any other element.

:beforeTwo special pseudo-elements—:after and

—can be used to generate page content from CSS and have many potential use cases.

In this section, we will learn:

Five different pseudo-elements
Generate text, image attribute values ​​and counters from CSS
How to create complex shapes with minimal markup

Pseudo-element

There are five pseudo-elements in CSS:

• :first-line
• :first-letter
• :selection
• :before
• :after

These are distinguished from pseudo-classes by double colons, but for simplicity, they are usually written using single colons in CSS.

:first-line Here is a long reference to the placeholder text block. I can change the color of the first line of the text using :first-letter, which applies even after the text is reformed. I can create an initial caps effect by setting the style of :selection with floating and larger font sizes. I can also change the color of the selected text using

.

:beforeI can use the :after and content pseudo-elements to add large quotes before and after the block reference. Text is generated from the

attribute, and then you can use CSS styles to get the desired effect.

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Create content

:beforeUsing :after and

pseudo-elements allow us to add various content to the page.

We have seen how to add text content to the page, but we can also add images, attribute values, counters, or empty strings, just access these two extra elements. <🎜>

Adding an image is similar to adding a background image using url(). Here, use url() as the value of the content attribute. I actually prefer to use background images and access the pseudo-element by creating an empty string for content. This provides more control over the image, as all commonly used properties such as background-position, background-repeat and background-size are available.

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

You can also use the content attribute to inject the value of the HTML attribute into the page. When creating a print stylesheet, I like to add the following code snippet to output the link's URL so that they can be read from the page:

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

This will add links after the link text for any link that is not an internal link or hash link.

The last special case of generating content is the value of the insertion counter variable. I've found this to be very useful in numbering complex lists of legal terms and conditions.

Here is a series of titles, and below is a series of nested lists. I want each chapter title to have a number and each list item is a child number for each chapter.

For each h2, I will increment a "section" counter; for each list item, I will increment a "item" counter. Before each chapter title, I will output the value of the chapter counter; before each list item, I will output the value of the item counter. Additional strings can be added between counters to create complex numbering systems. The simplified form of this method can be used to control the style of numbers or bullets in a list.

a[href]:not([href*="#"]):after {
  content: attr(href);
}

Shape

As each element on the page can have two "extra" elements and can be styled according to our preferences, various complex shapes can be created.

While thinking about the demo example, I saw a reference to the shape on CSS-Tricks; one of them stands out and I will step by step introduce how it works. Let's make yin and yang symbols with a single element.

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

Starting with the box, you can use border-radius to convert it into a circle. Two colored semicircles can be created using border-bottom which is equal to the height of the circle. Two points are created by creating two circles with pseudo-elements and placing them with position:absolute. Using borders that match the semicircle color, you can create two circular endpoints of the symbol. If you ask me, it's cool.

I like using pseudo-elements; you can do a lot with them and add various visuals to the page without messing up the markup.

Frequently Asked Questions about CSS Pseudo-Elements

What are the different types of CSS pseudo-elements?

CSS pseudo-element is used to style specific parts of an element. There are several types of pseudo-elements, including ::before, ::after, ::first-letter, ::first-line, ::selection, ::backdrop, ::placeholder, ::before and ::after. Each pseudo-element is targeted at a different part of the element. For example, ::first-letter and ::first-line are used to insert content before and after element content, while

and

are used to style the first letter or first line of a block-level element. ::before ::afterHow to use

and

pseudo-elements? ::before ::aftercontent and

pseudo-elements are used to insert content before and after the element content. They are often used for decorative purposes, such as adding icons or quotes. To use these pseudo-elements, you need to specify the

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

attribute. For example, to add a heart icon before a paragraph, you can use the following code:

Can I use pseudo-elements to style the form input? ::placeholder

Yes, you can style the form input using pseudo-elements. However, not all form inputs can be styled using pseudo-elements. For example, the

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

pseudo-element can be used to style the placeholder text for the input field. Here is an example:

How to style the first letter of a paragraph using pseudo-element? ::first-letter

You can use the

a[href]:not([href*="#"]):after {
  content: attr(href);
}

pseudo-element to style the first letter of the block-level element. This is usually used to create initials. Here is an example:

Can I use multiple pseudo-elements on the same element? ::before ::afterYes, you can use multiple pseudo-elements on the same element. For example, you can use ::before and ::after on the same element to insert content before and after its content. However, it is important to remember that the order of pseudo-elements is.

pseudo-element will always be inserted before

pseudo-element.

Does all browsers support pseudo-elements?

Most modern browsers support pseudo-elements. However, older versions of some browsers may not support all pseudo-elements. Before using pseudo-elements, it is best to check browser compatibility.

What is the difference between pseudo-elements and pseudo-classes?

Both pseudo-elements and pseudo-classes are used to apply styles to elements based on certain conditions. However, they are used for different purposes. A pseudo-class is used to set its style when an element is in a specific state, such as when the mouse is hovering over it or gaining focus. On the other hand, pseudo-elements are used to style specific parts of an element.

Can I use pseudo-elements with JavaScript?

<🎜>Pseudo-elements are not part of the DOM, so they cannot be accessed or manipulated directly using JavaScript. However, you can change the style applied to a pseudo-element by changing the style of the parent element using JavaScript. <🎜>

How to use ::selection pseudo-element?

::selection Pseudo-element is used to change the appearance of the user-selected text. For example, you can change the background color and text color of the selected text. Here is an example:

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Can I animate pseudo-elements?

Yes, you can animate pseudo-elements using CSS animations or transitions. However, remember that not all properties can be animate. For example, you can animate the opacity or transformation of a pseudo-element, but you cannot animate the content attribute.

The above is the detailed content of AtoZ CSS Screencast: CSS Pseudo Elements. For more information, please follow other related articles on the PHP Chinese website!