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

Question

Can I customize a list in HTML or CSS to use specific letters instead of letters?

Example:

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

I know that I can enter and format each entry, but I would prefer to change individual <li> tags with a class.

Answer 1

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

 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> (my highlight):

Groups of name values ​​can be terms and definitions, topics and metadata values, questions and answers, or any other data groups with a name.

Answer 2

Yes, you can use the :before pseudo-selector as follows:

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

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

Answer 3

You can 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 html changes.

Answer 4

Yes, you can include key letters in the list of items:

 <ul> <li>Q. a question will be posted here. <li>A. the answer will go here. </ul> 

and use list-style-type: none in CSS. Or it’s more reasonable to omit the ul markup and use only p markup for elements. The ul element should be used when it helps things, and not be what you should use for everything that remotely looks like a list.

You can also render Q and A browsers without including them in the content using CSS-generated content, but since they are part of the content, this can cause unnecessary problems when disabling or overriding CSS.