CSS ::before ਪਸੀਵਲ ਐਲੀਮੈਂਟ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

CSS ::before ਪਸੀਵਲ ਐਲੀਮੈਂਟ ਦੇ ਸਥਾਪਿਤ ਸਮੱਗਰੀ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਸਮੱਗਰੀ ਲਗਾਓ

ਵਰਤੋਂ content ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ: content: " (" attr(href) ")";

• ਸਟਰਿੰਗ: 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;
}

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਉਜ਼ਰ ਸਪੋਰਟ

ਸਟੇਬਲ ਸਪੋਰਟ ਪਸੀਵਲ ਐਲੀਮੈਂਟ ਦੀ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਸਿਫਾਰਸ਼ ਕਰਨ ਵਾਲੇ ਪੜਾਵਾਂ ਸਟੇਬਲ ਸਪੋਰਟ ਪਸੀਵਲ ਐਲੀਮੈਂਟ ਦੀ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਸਿਫਾਰਸ਼ ਕਰਨ ਵਾਲੇ ਪੜਾਵਾਂ ਸਟੇਬਲ ਸਪੋਰਟ ਪਸੀਵਲ ਐਲੀਮੈਂਟ ਦੀ ਪਹਿਲੀ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਸਿਫਾਰਸ਼ ਕਰਨ ਵਾਲੇ ਪੜਾਵਾਂ

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ ਪੁਸਤਕ:CSS ਪਸੀਵਲ ਐਲੀਮੈਂਟ

ਸੰਦਰਭ:CSS ::after ਪਸੀਵਲ ਐਲੀਮੈਂਟ