HTML FAQ упорядоченный список

Question

Я создаю сайт, который имеет страницу часто задаваемых вопросов, и мне было интересно, если я мог бы сделать «заказал» список, но вместо отображения

1. вопрос ....
   в) ответ .....
2. вопрос
   а) ответ
   и т.д. который будет сделано с помощью:

<ol> 
 
    <li>question</li> 
 
     <ol type="A"> 
 
     <li>answer</li> 
 
     </ol> 
 
    <li>question 2</li> 
 
     <ol type="A"> 
 
     <li>answer 2</li> 
 
     <ol> 
 
</ol>

Но есть ли способ превратить числа (и буквы) в вопрос и ответ? или мне приходится вручную вводить вопросы и ответы для каждой строки? Я использовал JavaScript (и css) раньше, но не JQuery. Я бы предпочел сделать это с помощью JavaScript.

EDIT: Я не знал о дде и Dt (список описания) когда я задал этот вопрос. Первоначально я пытался сделать одну строку «Вопрос», а затем «Ответ» на следующей строке, но ответ @Timothy Jones сказал, что имеет смысл, а затем упорядоченный список.

Answer 1

Я хотел бы сделать это с помощью description list, и селектор CSS ::before:

<style type="text/css"> 
 
    dt::before { 
 
     content: "Question: "; 
 
    } 
 
    dd::before { 
 
     content: "Answer: "; 
 
    } 
 
</style> 
 
<dl> 
 
    <dt>How would this look?</dt> 
 
     <dd>it would look alright</dd> 
 
    <dt>Alright, well how would this look?</dt> 
 
     <dd>it would also look alright</dd> 
 
</dl>

(добавить стили в зависимости от обстоятельств). Я предпочитаю это с помощью javascript-решения, так как он не требует никакой обработки после загрузки страницы.

Answer 2

Одним из способов было бы установить стиль значка none, а затем использовать в CSS ранее заданный текст.

.questions li { list-style-type: none; font-weight: bold; color: black; } 
 
.questions li:before { content: "Question"; padding-right: 5px; color: red; } 
 
.answer li { list-style-type: none; font-weight: bold; color: black; } 
 
.answer li:before { content: "Answer"; padding-right: 5px; color: red; }

<ol class="questions"> 
 
    <li>Do you do the thing?</li> 
 
     <ol class="answer"> 
 
     <li>Yes, we do.</li> 
 
     </ol> 
 
    <li>How do you do the thing?</li> 
 
     <ol class="answer"> 
 
     <li>With lots of magic!</li> 
 
     <ol> 
 
</ol>

Answer 3

HTML

<ol class="faq"> 
    <li> 
     <ol><li></li></ol> 
    </li> 
    <li> 
     <ol><li></li></ol> 
    </li> 
    <li> 
     <ol><li></li></ol> 
    </li> 
    <li> 
     <ol><li></li></ol> 
    </li> 
</ol> 

CSS

ol { list-style-type: none; } 

ol.faq { padding-left: 0; } 

ol.faq > li::before { 
    content: "Question"; 
    color: red; 
} 

ol.faq > li > ol > li::before { 
    content: "Answer"; 
    color: green; 
} 

DEMO: http://jsfiddle.net/wxocofu6/5/

Обратите внимание, что в вашем коде ваши списки ненадлежащим образом вложены.