A pseudo-element (இரட்டை பெருங்குறி ::) ஒரு உறுப்பின் குறிப்பிட்ட பகுதிஐ அலங்கரிக்கிறது, அல்லது உள்ளடக்கத்தை உருவாக்குகிறது இது HTML இல் இல்லை — கூடுதல் குறிப்பு சேர்க்காமல்.
{
: ;
}
{
: ;
}
content சொத்து கட்டாயமாகும் — இல்லாமல், pseudo-element வரையப்படாது. உருவாக்கப்பட்ட உள்ளடக்கம் உறுப்பின் தொடக்கத்தில் (::before) அல்லது முடிவில் (::after) ஒரு குழந்தை.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
இது பொதுவான பயன்பாடு: அம்புகள், பொட்டுக்கள், மூடுதல்கள், அலங்கார கோடுகள் வரைதல் — HTML ஐ முற்றிலும் காட்சி கூறுகளிலிருந்து சுத்தமாக வைத்திருப்பது.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 :: ஐ pseudo-element மற்றும் pseudo-classes ஐ வேறுபடுத்துவதற்கு அறிமுகப்படுத்தியது (உலாவிகள் இன்னும் பொருந்தக்கூடிய தன்மைக்கு பழையவற்றில் ஒற்றை பெருங்குறி ஏற்றுக்கொள்கின்றன, ஆனால் :: ஐ பயன்படுத்துகின்றன).
உருவாக்கப்பட்ட content சில திரை வாசகர்களால் படிக்கப்படுகிறது — அத்தியாவசிய தகவலை ::before/::after இல் மட்டுமே வைக்க வேண்டாம் (அலங்கரணத்திற்கு பயன்படுத்தவும்), மற்றும் அலங்கார ஐகான்கள் அணுகல் மரத்திற்கு வெளியே விடப்பட்ட சிறந்தது.
Pseudo-elements உங்களை ஐகான்கள், அலங்கார வடிவங்கள் (அம்புகள், வகுப்பியாக்கிகள்), முதல் எழுத்துக்கள் மற்றும் எண்ணிக்கைகளை முற்றிலும் CSS இல் சேர்க்க அனுமதிக்கிறது — கூடுதல் <div>க்கள் அல்லது <span>க்கள் இல்லை.
அவை சொற்பொருள் குறிப்பு வைத்திருக்கையில் வளமான காட்சி விவரங்களை செயல்படுத்துகின்றன, மற்றும் அவை சுத்தமான, பராமரிக்கக்கூடிய பாணியின் ஒரு கூறு.