How to use the letters "Q" and "A" inside a list in HTML

Question

Is it possible to set up a list in HTML or CSS to use specific letters instead of bullets?

Example:

Q. a question will be posted here.
A. the answer will go here.

I know I can go in and format each entry, but I would prefer to modify individual <li> tags with a class.

Answer 1

Semantically, a <dl> is a better fit for Q/A. You can use the :before pseudo-element like so:

dt:before {
  content: 'Q. ';
}
dd:before {
  content: 'A. ';
}

<dl>
  <dt>Is this a question?</dt>
  <dd>Yes, it is.</dd>
</dl>

Note: According to the documentation for <dl> (emphasis mine):

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

Answer 2

Yes, you can use :before pseudo-selector like this:

li.question:before {
    content: "Q. ";
}
li.answer:before {
    content: "A. ";
}

Now you just apply classes question and answer to those <li> elements.

Answer 3

You could use a combination of :nth-child and :before.

li {
    list-style:none;
}   
li:nth-child(odd):before {
    content:"Q. "; 
}
li:nth-child(even):before {
    content:"A. "; 
}

Example: http://jsfiddle.net/Xt72Y/

It works with both ol and ul and does not require changing the html.