How to customize unordered list items in HTML using CSS

Question

I am designing a Q&A page using basic HTML.

This is how my page looks like. JSFIDDLE

I need to add 'A' to the answer of every question. Some answers contains multiple paragraph, so 'A' has to be added to the first paragraph of the answer & it should be aligned same as that of 'Q'.

An example is here: Link

HTML

<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>

Style

<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>

Onkar Deshpande · Accepted Answer · 2015-01-13 07:29:39Z

1

Made changes to your code. Please find updated CSS JSFIDDLE

edited Jan 13, 2015 at 7:29

answered Jan 13, 2015 at 7:15

Onkar Deshpande

2341 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sajeev C Over a year ago

There's a space at the beginning of first paragraph. that is before 'answer para 1'. How to remove that? @Onkar Deshpande

Onkar Deshpande Over a year ago

Updated fiddle link with changes.

sanir ranta · Accepted Answer · 2015-01-13 07:15:29Z

1

 li p:first-child:before {
        display: inline-block;
        content: "A:";
        width: 2em;
        margin-left: -2em;
    }

use this css

answered Jan 13, 2015 at 7:15

sanir ranta

2912 silver badges7 bronze badges

Comments

shanidkv · Accepted Answer · 2015-01-13 07:40:02Z

1

I have added 'A' for first paragraph for each answer and beautified little for self satisfaction :)

Best practice remove inline style and add in external CSS(Question & answer text color).

HTML

<h4>Frequently Asked Questions </h4>
<div>
    <ul>
        <li>Question heading 1
         <p>answer para  1</p>
         <p>answer para 2</p>
        </li>

        <li>Question heading 2
          <p>answer para  1</p>
        </li>

        <li>Question heading 3
          <p>answer para  1</p>
        </li>

    </ul>
</div>

CSS

*{
    font-family: Arial;
    font-size: 12px;
}
ol {
    margin-left: 0;
    padding-left: 0;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 0em;
    color: #626F74;
    font-weight: bold;
}
li:before {
    display: inline-block;
    content: "Q:";
    width: 2em;
    margin-left: -2em;
}
li p{
    color: #000;
}
li p:first-child:before {
    display: inline-block;
    content: "A:";
    width: 2em;
    margin-left: -2em;
}

UPDATED JSFIDDLE

answered Jan 13, 2015 at 7:40

shanidkv

1,1031 gold badge9 silver badges12 bronze badges

1 Comment

Sajeev C Over a year ago

I already got a solutions. Anyway, thanks for helping. +1 for that.

Collectives™ on Stack Overflow

How to customize unordered list items in HTML using CSS

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related