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-elements నుండి pseudo-classes ను విభేదించటానికి (బ్రౌజర్లు ఇప్పటికీ చరిత్ర కారణాల కోసం పానిలో ఒకటి కోలన్ ఆమోదం చేస్తాయి, కానీ :: ఉపయోగం చేస్తాయి).
ఉత్పత్తి చేసిన content కొన్ని స్క్రీన్ రీడర్ల ద్వారా చదవబడుతుంది — ఒత్తిడిగల సమాచారాన్ని ::before/::after లో మాత్రమే ఉంచవద్దు (అలంకరణ కోసం దీన్ని ఉపయోగించండి), మరియు అలంకార చిహ్నాలు యాక్సెస్బిలిటీ చెట్టు నుండి విడిచిపెట్టడం ఉత్తమం.
Pseudo-elements మీకు చిహ్నాలు, అలంకార ఆకారాలు (బాణాలు, డివైడర్లు), డ్రాప్ క్యాప్లు మరియు కౌంటర్లను పూర్తిగా CSS లో జోడించడానికి అనుమతిస్తుంది — అదనపు <div>లు లేదా <span>లు లేవు.
వారు సిమాంటిక్ మార్కప్ను ఉంచుకుంటారు సমృద్ధమైన విజువల్ వివరాలను సక్షమ చేస్తూ, మరియు వారు శుభ్రమైన, నిర్వహణీయమైన స్టైలింగ్ యొక్క ఆధారం.