HTMLのリストの中で文字 "Q"と "A"を使う方法

Question

HTMLやCSSでリストを設定して、箇条書きではなく特定の文字を使うことはできますか？

例：

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

私は私が行くと、各エントリの書式を設定することができます知っているが、私はクラスで個々の<li>タグを修正することを好むだろう。

Answer 1

意味的には、<dl>がQ/Aに適しています。

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

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

注：<dl>ためthe documentationによれば、（強調鉱山）：

名前と値のグループは、条件とすることができるので、好きは:before擬似要素を使用することができ定義、メタデータのトピックと値、の質問と回答、または他の名前/値のデータグループを使用できます。

Answer 2

はい、あなたはこのよう:before擬似セレクタを使用することができます。今、あなたはちょうどそれらの<li>要素にクラスquestionとanswerを適用

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

。

Answer 3

:nth-childと:beforeの組み合わせを使用できます。

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

例：http://jsfiddle.net/Xt72Y/

それはolとulの両方で動作し、HTMLを変更する必要はありません。

Answer 4

はい、あなたは、リスト項目の内容にキー文字を含めることができます。

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

とCSSでlist-style-type: noneを使用しています。または、より合理的には、ulマークアップを省略して、アイテムにはただpマークアップを使用してください。 ul要素は、リモートでリストのように見えるものすべてに使用する必要があるものではなく、物事を助けるときに使用することになっています。

CSSによって生成されたコンテンツを経由して、適切なコンテンツにそれらを含めずにブラウザがQとAを表示することも可能であるが、彼らは、コンテンツの一部であるとして、CSSが無効になっているか無効にされたときに、これは不必要な問題を引き起こします。