::before ਅਤੇ ::after ਵਰਗੇ pseudo-elements ਕੀ ਹੁੰਦੇ ਹਨ?

Question

Accepted Answer

ਇੱਕ **pseudo-element** (ਡਬਲ ਕੋਲਨ `::`) ਕਿਸੇ ਐਲੀਮੈਂਟ ਦੇ ਇੱਕ ਖਾਸ *ਹਿੱਸੇ* ਨੂੰ ਸਟਾਈਲ ਕਰਦਾ ਹੈ, ਜਾਂ **ਸਮੱਗਰੀ ਤਿਆਰ ਕਰਦਾ ਹੈ** ਜੋ HTML ਵਿੱਚ ਨਹੀਂ ਹੈ — ਬਿਨਾ ਵਾਧੂ ਮਾਰਕਅਪ ਸ਼ਾਮਿਲ ਕੀਤੇ। ## ::before ਅਤੇ ::after — ਤਿਆਰ ਕੀਤੀ ਸਮੱਗਰੀ ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` `content` ਸੰਪੱਤੀ ਲਾਜ਼ਮੀ ਹੈ — ਇਸ ਤੋਂ ਬਿਨਾ, pseudo-element ਰੈਂਡਰ ਨਹੀਂ ਹੁੰਦਾ। ਤਿਆਰ ਕੀਤੀ ਸਮੱਗਰੀ ਐਲੀਮੈਂਟ ਦੀ ਸ਼ੁਰੁਆਤ (`::before`) ਜਾਂ ਅੰਤ (`::after`) ਵਿੱਚ ਇੱਕ ਬਾਲ ਹੁੰਦੀ ਹੈ। ## ਵਾਧੂ divs ਤੋਂ ਬਿਨਾ ਸਜਾਵਟੀ ਆਕਾਰ ```css .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 ਨੂੰ ਖਾਲਸ ਦਿੱਖ ਵਾਲੇ ਐਲੀਮੈਂਟਸ ਤੋਂ ਸਾਫ ਰੱਖਣਾ। ## ਹੋਰ pseudo-elements (ਕਿਸੇ ਐਲੀਮੈਂਟ ਦੇ ਹਿੱਸੇ ਨੂੰ ਸਟਾਈਲ ਕਰੋ) ```css 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 */ ``` ## ਇੱਕ ਬਨਾਮ ਦੋ ਕੋਲਨ ```css .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 ਵਿੱਚ ਸ਼ਾਮਿਲ ਕਰਨ ਦਿੰਦੇ ਹਨ — ਕੋਈ ਵਾਧੂ `

`s ਜਾਂ ``s ਨਹੀਂ। ਉਹ ਮਾਰਕਅਪ ਨੂੰ ਅਰਥਵਾਨ ਰੱਖਦੇ ਹਨ ਜਦੋਂ ਕਿ ਅਮੀਰ ਦਿੱਖ ਵਾਲੀ ਵੇਰਵਾ ਯੋਗ ਬਣਾਉਂਦੇ ਹਨ, ਅਤੇ ਉਹ ਸਾਫ, ਪ੍ਰਬੰਧਨਯੋਗ ਸਟਾਈਲਿੰਗ ਦਾ ਇੱਕ ਮੁੱਖ ਹਿੱਸਾ ਹਨ।