How to use pseudo elements before and after in CSS-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to use pseudo elements before and after in CSS

不言

Nov 26, 2018 am 11:18 AM

Pseudo element

How to use pseudo elements before and after in CSS? This article will share with you how to use the pseudo elements before and after in CSS.

What are::before and ::after?

The descriptions of before and after are as follows

元素::before {content:插入的内容;}
元素::after {content:插入的内容;}

content: Enter part of the content to be inserted

To insert letters and symbols in content, please use "" Get up and enter.
To insert images and sounds into content, please enter the url (target path).

You can also specify before and after for the same element.

Pseudo elements such as before and after in CSS3 use :: (double colon), but even with only one colon, it can be recognized and work properly in most browsers.

Supported browsers

Browsers that support ::before and ::after pseudo-elements: Chrome, Firefox3.5~, Safari4~, IE8 ~, Opera6~.

How to use pseudo elements before and after?

The following is an HTML file that applies before and after
(This is an example where the *html and css files are in the same directory and the file name of the external style sheet is "sample.css")

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
<h3 id="标题前加入标记">标题前加入标记</h3>
    <p>段落前插入图像</p>
  </body>
</html>

sample.css

h3::before{
  content:"◆";
}
p::before{
  content:url(img/luffys.jpg);
}

In this example, the symbol "♦" is inserted before the heading of

and before the paragraph of

Image file "img/luffys.jpg".

It displays as follows on the browser: there is "◆" before the title and an image file is inserted before the paragraph.

How to use pseudo elements before and after in CSS

The following is an example of using both before and after on the same element.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <h3 id="在标题之前和之后加入标记">在标题之前和之后加入标记</h3>
    <p>段落后插入图像</p>
  </body>
</html>

sample.css

h3 :: before {content："◆";} 
h3 :: after {content："◆";} 
p :: after {content：url（img/luffys.jpg）;}

In this example, the symbol "♦" is inserted at the beginning and end of the

heading, and the image is inserted after the paragraph.

It looks like this on the browser: adding symbols before and after the title and images after the paragraphs.

How to use pseudo elements before and after in CSS

Finally explain the number of colons

There are two pseudo-elements: before /: after and :: before / ::after.

In css2, write a colon, such as: before /: after.

In css3, write two colons, for example, :: before / :: after.

Since css3 is the latest css, it can also be said that the pseudo elements are :: before / :: after.

For ::before / ::after, main browser compatible.

However, it should be noted that some syntax of CSS3 is not compatible with the main browsers.

The above is the detailed content of How to use pseudo elements before and after in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that