How to use pseudo elements before and after in CSS
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.
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.
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
Why do pseudo-elements fail?
Nov 21, 2023 pm 05:13 PM
Reasons for pseudo-element failure: 1. Selector issues; 2. Style conflicts; 3. Inheritance issues; 4. Syntax errors; 5. Browser compatibility issues, etc. Detailed introduction: 1. Selector problem, the selector of the pseudo element may be incorrect, resulting in the target element not being selected; 2. Style conflict, if there is a style conflict in CSS, the pseudo element may become invalid; 3. Inheritance problem, Pseudo elements may not inherit certain style attributes; 4. Syntax errors. If there are syntax errors in CSS, the pseudo elements may fail; 5. Browser compatibility issues, etc.
Implement various application scenarios of CSS::placeholder pseudo-element selector
Nov 20, 2023 pm 03:17 PM
Implementing multiple application scenarios of the CSS::placeholder pseudo-element selector requires specific code examples. In web development, CSS is a commonly used style sheet language used to control the layout and style of web pages. The ::placeholder pseudo-element selector is a new selector in CSS3, which is used to modify the placeholder style of input boxes (including text input boxes, password input boxes, etc.). Below we will introduce various application scenarios and provide corresponding code examples. Modify the color of the input box placeholder:
css pseudo-selector learning pseudo-class selector analysis
Aug 03, 2022 am 11:26 AM
In the previous article "Css Pseudo-Selector Learning - Pseudo-Element Selector Analysis", we learned about pseudo-element selectors, and today we take a closer look at pseudo-class selectors. I hope it will be helpful to everyone!
Why is hover a pseudo element?
Oct 09, 2023 pm 05:45 PM
Hover is not a pseudo-element, it is a pseudo-class. Pseudo-classes are used to select a specific state or behavior of an element, while pseudo-elements are used to add styles to specific parts of an element. Because :hover is used to select a specific state of an element rather than adding styles to a specific part of the element, you can use the :hover pseudo-class to style the mouseover state of an element, and you can use the :hover pseudo-class to add hover effects to links. The link's color, background color, etc. can change when the mouse hovers over it.
What is the use of adding pseudo elements?
Oct 09, 2023 pm 05:45 PM
Pseudo elements can be used to create decorative effects, achieve specific layout effects, create interactive effects, modify specific element states and create some special effects. Detailed introduction: 1. Create decorative effects. By setting the content attributes and styles of the :before or :after pseudo-element, you can insert icons, shapes or other decorative elements before or after the element, so that you can add more elements to the web page. Visual appeal and personalization; 2. Achieve specific layout effects, which can be created through :before and :after pseudo-elements, etc.
Explore the basic concepts and usage scenarios of CSS pseudo-classes and pseudo-elements
Dec 23, 2023 pm 01:21 PM
Understand the basic concepts and application scenarios of CSS pseudo-classes and pseudo-elements. CSS (CascadingStyleSheets) is a markup language used to describe the style of web pages. It can control the appearance and layout of elements in web pages. In CSS, pseudo-classes and pseudo-elements are very useful features that can further expand the application scope and flexibility of CSS. 1. Pseudo-classes Pseudo-classes are keywords used to select specific state elements. Common pseudo-classes include: hover, active, focus, etc. Here are some common
What are pseudo elements
Oct 09, 2023 pm 05:01 PM
Pseudo-elements are a special selector in CSS that are used to insert content at specific locations on an element. They are called "pseudo-elements" because they are not elements that actually exist in the HTML document, but are created through CSS. of. It can be used to insert content before or after an element, or at a specific location inside an element, usually to add a decorative effect or change the appearance of the element. In CSS, pseudo-elements are represented by double colons instead of single colon. This is to distinguish them from pseudo-classes, which are represented by single colon.
What is the weight of pseudo elements?
Oct 11, 2023 pm 02:02 PM
The weight of pseudo elements is 0. In CSS, selector weight is used to determine the priority of styles. The higher the weight value, the higher the priority and the style will be applied. This means that no matter where the pseudo-element selector appears in the selector, it has the lowest weight. Even when combined with other selectors, the weight of a pseudo-element selector does not affect the weight of the entire selector. No matter what the weight of other selectors is, the styles of pseudo-element selectors will not be overridden, etc.
