I am currently working on a Q&A page using simple HTML.
This is the current appearance of my page. Check it out here on JSFIDDLE.
My task involves adding an 'A' to the answer for each question. Some answers have multiple paragraphs, so the 'A' should only be added to the first paragraph and aligned similar to the 'Q.'
You can see an example of this format by visiting this Link.
Here is the HTML structure:
<h4>Frequently Asked Questions </h4>
<div >
<ul>
<li style="color: blue">
Question heading 1
<p style="color: #000000">
answer para 1
</p>
<p style="color: #000000">
answer para 2
</p>
</li>
<li style="color: blue">
Question heading 2
<p style="color: #000000">
answer para 1
</p>
</li>
<li style="color: blue">
Question heading 3
<p style="color: #000000">
answer para 1
</p>
</li>
<li style="color: blue">
Question heading 4
<p style="color: #000000">
answer para 1
</p>
</li>
</ul>
</div>
This is the CSS styling applied:
<style type="text/css">
ol {
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 0em;
}
li:before {
display: inline-block;
content: "Q:";
width: 2em;
margin-left: -2em;
}
</style>