MENU


Generated Content Properties

content (with the selectors ::before, ::after & ::marker)
:none: inserts nothing.
:normal: inserts nothing.
:open-quote: inserts ".
:close-quote: inserts ".
:no-open-quote: removes ".
:no-close-quote: removes ".
:"hello": inserts the word "hello".
:attr(class):inserts the content of the class attribute.
:url('a.gif'): inserts the image a.gif. (more info here)
:counter(cnt): inserts a counter named cnt (A counter is a number that increases when counter-increment is called.)
:counters(c, '.'): inserts a nested counter formed by joining numbers with '.'.

counter-reset
:none: no counter is set.
:counter: sets the value of 'counter' to 0.
:cnt 5: creates a counter named cnt and sets it to 5.

counter-increment (with the selectors :before and :after, and counter-reset)
:none: no counter is incremented.
:cnt 2: increment the counter called cnt by 2.

quotes (for <q> and embedded quotations)
:none:use no quotes.
: auto: automatically sets the quotes based on 'lang'.
:"<<" ">>" "'" "'": sets the symbols for the first-level quotations to be << and >>, the second-level quotations to be ' and '. More symbols may ensue.

RESETRUNFULL
<!DOCTYPE html><html><head><style type="text/css">
   body {counter-reset:section;}
   h1 {counter-reset:subsection;}
   h1:before{ 
      counter-increment:section;
      content:"Identity " counter(section) ". (" attr(class) ")";
   }
   h2:before { 
      counter-increment:subsection;
      content:counter(section) "."
      counter(subsection) " ";
   }
   q {
      quotes: "<" ">" "'" "'";
   }
</style></head><body>
   <h1 class="R"><q><q>Main</q> Race</q></h1>
   <h2>Dutch</h2>
   <h2>American</h2>
   <h2>Indian</h2>

   <h1 class="P"><q>Place</q></h1>
   <h2>London</h2>
   <h2>Beijing</h2>

   <h1 class="S"><q>Sex</q></h1>
   <h2>Male</h2>
   <h2>Female</h2>
</body></html>

RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
   div { margin-bottom:1vh; }
   input + span { position: relative; }
   input + span::before { position: absolute; right: -20px; }
   input:invalid  { border: 2px solid red; }
   input:invalid + span::before { content: '✖'; color: red; }
   input:valid + span::before { content: '✓'; color: green; }
</style>
</head><body>
   <div>
      <label for="fname">First name *: </label>
      <input id="fname" name="fname" type="text" required />
      <span></span>
   </div>
   <div>
      <label for="email">Email *: </label>
      <input id="email" name="email" type="email" required />
      <span></span>
   </div>
</body></html>