CSS ::before ਪਸੀਵਲ ਐਲੀਮੈਂਟ
- ਪਿਛਲਾ ਪੰਨਾ ::backdrop
- ਅਗਲਾ ਪੰਨਾ ::file-selector-button
- ਇੱਕ ਤਲਾਕ ਵਾਪਸ ਜਾਓ CSS ਪਸ਼ਾ ਐਲੀਮੈਂਟ ਸੰਦਰਭ ਮੈਨੂਅਲ
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
CSS ::before
ਪਸੀਵਲ ਐਲੀਮੈਂਟ ਦੇ ਸਮੱਗਰੀ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੋਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
ਵਰਤੋਂ content
ਪੈਰਾਮੀਟਰ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਨਿਰਦਿਸ਼ਟ ਕਰਦੀ ਹੈ। content ਦਾ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ:
- ਸਟਰਿੰਗ: content: "Hello world!";
- ਚਿੱਤਰ: content: url(myimage.jpg);
- ਬਿਨਾ ਸਮੱਗਰੀ: content: none;
- ਗਿਣਤੀ: content: counter(li);
- ਕੁਤਰਾ: content: open-quote;
- ਪੈਰਾਮੀਟਰ: content: " (" attr(href) ")";
ਸੁਝਾਅ:ਸਾਥੀ ਨੂੰ ਧਿਆਨ ਰੱਖੋ ਕਿ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ ਹੀ ਹੈ। ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਸਮੱਗਰੀ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ ਦੇ ਹੋਰ ਸਮੱਗਰੀ ਤੋਂ ਪਹਿਲਾਂ ਜੋੜਿਆ ਜਾਵੇਗਾ。
ਵਰਤੋਂ ::after
ਸਮੱਗਰੀ ਦੇ ਬਾਅਦ ਕੁਝ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕਰੋ。
ਉਦਾਹਰਣ
ਉਦਾਹਰਣ 1
ਹਰ ਪੰਨੇ <p> ਐਲੀਮੈਂਟ ਦੇ ਸਮੱਗਰੀ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਸਟਰਿੰਗ ਸ਼ਾਮਲ ਕਰੋ:
p::before { content: "ਇਹ ਪੜ੍ਹੋ: "; }
ਉਦਾਹਰਣ 2
ਹਰ ਪੰਨੇ <p> ਐਲੀਮੈਂਟ ਦੇ ਸਮੱਗਰੀ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਸਟਰਿੰਗ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਸਮੱਗਰੀ ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ:
p::before { content: "ਇਹ ਪੜ੍ਹੋ -"; background-color: yellow; color: red; font-weight: bold; }
CSS ਗਰੈਫਿਕਸ
::before { css declarations; }
ਤਕਨੀਕੀ ਵੇਰਵੇ
ਸੰਸਕਰਣ: | CSS2 |
---|
ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ
ਸਾਰੇ ਪਸੀਵਲ ਐਲੀਮੈਂਟ ਲਈ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਨੂੰ ਸਾਰੇ ਸਾਰੇ ਤੇਲਚਾਰੀਆਂ ਵਿੱਚ ਸਿਫਾਰਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ。
ਚਰਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
---|---|---|---|---|
4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
ਸਬੰਧਤ ਪੰਨੇ
ਸਿੱਖਿਆ ਪੁਸਤਕ:CSS ਪਸੀਵਲ ਐਲੀਮੈਂਟ
- ਪਿਛਲਾ ਪੰਨਾ ::backdrop
- ਅਗਲਾ ਪੰਨਾ ::file-selector-button
- ਇੱਕ ਤਲਾਕ ਵਾਪਸ ਜਾਓ CSS ਪਸ਼ਾ ਐਲੀਮੈਂਟ ਸੰਦਰਭ ਮੈਨੂਅਲ