CSS counter() ਫੰਕਸਨ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

counter() ਫੰਕਸਨ ਵਿਸ਼ੇਸ਼ ਕੌਂਟਰਰ ਦਾ ਮੌਜੂਦਾ ਮੁੱਲ ਚਿੰਨ੍ਹ ਰੂਪ ਵਿੱਚ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

ਪੰਨੇ ਲਈ ਕੌਂਟਰਰ ਬਣਾਓ (body ਚੋਣਕਰ ਵਿੱਚ)। ਹਰੇਕ <h2> ਤੱਤ ਨੂੰ ਕੌਂਟਰਰ ਦਾ ਮੁੱਲ ਜੋੜੋ ਅਤੇ ਹਰੇਕ <h2> ਤੱਤ ਤੋਂ ਪਹਿਲਾਂ "ਦੂਜੇ ਚਾਪ" ਦੇ ਟੈਕਸਟ ਨੂੰ ਜੋੜੋ:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

ਕੌਂਟਰਰ ਦੀ ਸਟਾਈਲ ਸੈਟ ਕਰੋ:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section, upper-roman) ": ";
}

counter(countername, counterstyle)

ਮੁੱਲ	ਵਰਣਨ
countername	ਲਾਜ਼ਮੀ। ਕੌਂਟਰਰ ਦਾ ਨਾਮ (ਜੋ ਕਿ counter-reset ਅਤੇ counter-increment ਅਤੇਰੀਆਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ)。 ਧਿਆਨ ਦੇਵੋ, ਨਾਮ ਅੰਕੜੇ ਵਿੱਚ ਪੱਖਾ ਹੈ。
counterstyle	ਚੋਣੀ ਹੋ ਸਕਦੀ ਹੈ। ਕੌਂਟਰਰ ਦੀ ਸਟਾਈਲ (ਜੋ ਕਿ list-style-type ਦਾ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ, @counter-style ਦਾ ਨਾਮ ਜਾਂ symbols() ਫੰਕਸਨ ਹੋ ਸਕਦਾ ਹੈ)。 ਮੂਲ ਮੁੱਲ ਦਸੈਂਟਲ ਹੈ。

ਮੁੱਲ

ਵਰਣਨ

countername

ਲਾਜ਼ਮੀ। ਕੌਂਟਰਰ ਦਾ ਨਾਮ (ਜੋ ਕਿ counter-reset ਅਤੇ counter-increment ਅਤੇਰੀਆਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ)。

ਧਿਆਨ ਦੇਵੋ, ਨਾਮ ਅੰਕੜੇ ਵਿੱਚ ਪੱਖਾ ਹੈ。

counterstyle

ਚੋਣੀ ਹੋ ਸਕਦੀ ਹੈ। ਕੌਂਟਰਰ ਦੀ ਸਟਾਈਲ (ਜੋ ਕਿ list-style-type ਦਾ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ, @counter-style ਦਾ ਨਾਮ ਜਾਂ symbols() ਫੰਕਸਨ ਹੋ ਸਕਦਾ ਹੈ)。

ਮੂਲ ਮੁੱਲ ਦਸੈਂਟਲ ਹੈ。