Home > Developer > Web Develop
Pseudo-objects are also called pseudo-elements, and in the past, pseudo-classes and pseudo-elements are written in front with only a colon, which should actually be:
: Weilei:: Pseudo-element and now we are able to parse the pseudo-class with a colon in order to be compatible with the old writing method.
Pseudo-class general reaction cannot easily or reliably detect the State or property of an element in CSS;
Pseudo-elements represent some form of document structure outside the DOM.
Pseudo-classes are more about defining the state of an element, while pseudo-elements change the structure of the document, plus an element that does not actually exist (pseudo-element) outside the structure.
Common Pseudo-elements:
1. E:before/e::before
2. E:after/e::after
1. E:before/e::before
The before selector inserts content in front of the contents of the selected element for use with the content property.
Although E:before can be converted to E::before, you write pseudo-elements that are to be normalized with two colons.
Example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
Li:nth-child (2) {font-size:30px; color:orange;}
Ul::before{content: "This is the pseudo-element of UL"; Color:blue;}
Ul::after{content: "This is the pseudo-element after";}
</style>
<body>
<ul>
<li> Liu Yifei </li>
<li> Fan Bingbing </li>
<li> Yang Mi </li>
<li> Yuan Shanshan </li>
</ul>
</body>
Shown as:
is displayed before and after the selected label content.
2. E:after/e::after
The after selector inserts content before the contents of the selected element for use with the content property
Although E:before can be converted to E::before, you need to standardize when you write pseudo-elements with two colons.
The content property is used in conjunction with:: Before and:: After pseudo-elements to insert a build. Pseudo-elements can also add pictures.
Checked + pseudo element exercises
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
input:checked+span{background:red;}
Input:checked+span::after{content: "I was chosen";}
</style>
<body>
<form action= "" method= "POST" >
<fieldset id= "" >
<legend> Click on the star you like </legend>
<ul>
<li>
<label>
<input type= "Radio" Name= "star"/><span> Fan Bingbing </span>
</label>
</li>
<li>
<label>
<input type= "Radio" Name= "star"/><span> Li Bingbing </span>
</label>
</li>
<li>
<label>
<input type= "Radio" Name= "star"/><span> Yang Mi </span>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend> The following is a multi-select </legend>
<ul>
<li>
<label>
<input type= "checkbox" name= "multi-select"/><span> Magic Pirates </span>
</label>
</li>
<li>
<label>
<input type= "checkbox" Name= "multiple selection"/><span> Warcraft </span>
</label>
<li>
<label>
<input type= "checkbox" name= "Multiple Choice"/><span> Beijing meets Seattle </span>
</label>
</li>
</li>
</ul>
</fieldset>
</form>
</body>
Shown as:
This example uses the following:
Adjacent selectors (e+f)
Select the F element that adheres to the e element, denoted by a plus sign. Select the adjacent first sibling element.
And after
CSS pseudo-element selector (pseudo-Object selector) checked + pseudo element practice
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
