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

css, html

Solution

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.

Problem

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.

Original source