CODEWITHSUNDEEP
htmlcss
Sajeev C
Sajeev C

Reputation: 1538

How to customize unordered list items in HTML using CSS

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>

Upvotes: 0

Views: 79

Answers (3)

shanidkv
shanidkv

Reputation: 1103

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

Upvotes: 1

Onkar Deshpande
Onkar Deshpande

Reputation: 234

Made changes to your code. Please find updated CSS JSFIDDLE

Upvotes: 1

sanir ranta
sanir ranta

Reputation: 291

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

use this css

Upvotes: 1

Related Questions