ਇੱਕ pseudo-element (ਡਬਲ ਕੋਲਨ ::) ਕਿਸੇ ਐਲੀਮੈਂਟ ਦੇ ਇੱਕ ਖਾਸ ਹਿੱਸੇ ਨੂੰ ਸਟਾਈਲ ਕਰਦਾ ਹੈ, ਜਾਂ ਸਮੱਗਰੀ ਤਿਆਰ ਕਰਦਾ ਹੈ ਜੋ HTML ਵਿੱਚ ਨਹੀਂ ਹੈ — ਬਿਨਾ ਵਾਧੂ ਮਾਰਕਅਪ ਸ਼ਾਮਿਲ ਕੀਤੇ।
::before ਅਤੇ ::after — ਤਿਆਰ ਕੀਤੀ ਸਮੱਗਰੀ
css
{
: ;
}
{
: ;
}
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>s ਜਾਂ <span>s ਨਹੀਂ।
ਉਹ ਮਾਰਕਅਪ ਨੂੰ ਅਰਥਵਾਨ ਰੱਖਦੇ ਹਨ ਜਦੋਂ ਕਿ ਅਮੀਰ ਦਿੱਖ ਵਾਲੀ ਵੇਰਵਾ ਯੋਗ ਬਣਾਉਂਦੇ ਹਨ, ਅਤੇ ਉਹ ਸਾਫ, ਪ੍ਰਬੰਧਨਯੋਗ ਸਟਾਈਲਿੰਗ ਦਾ ਇੱਕ ਮੁੱਖ ਹਿੱਸਾ ਹਨ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ