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

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

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 ਪਸੀਵਲ ਐਲੀਮੈਂਟ

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