Reputation: 51
I want to achieve a style in the list type something like the below image.
A ordered list with purple numbers consisting of unordered list with yellow bullets
But I'm getting the styling something like this
My HTML is ul list inside the ol.
Below is my HTML code
ul {
padding-left: 20px;
}
ul li {
list-style: none;
position: relative;
margin-bottom: 7px;
}
ul li:before {
color: #F5C400;
content: '\2022';
font-size: 1.2em;
position: absolute;
top: -.2em;
left: -1em;
}
ul li ul li:before {
content: '\25cB';
}
.nav-item:before {
content: '';
padding: 0;
}
ol li {
list-style-type: none;
counter-increment: list;
position: relative;
}
ol li:before {
content: counter(list) ".";
position: absolute;
left: -2em;
text-align: right;
color: #893579;
}
<div class="card-body">
<p>We know there are many things to consider, so ask yourself some of the following questions to help narrow down your choices.
<ol>
<li><b>Do you prefer to pay more out of your paycheck (premiums) and less when you get medical care or the other way around? </b></li>
<ul>
<li>The Gold plan premiums are quite a bit higher, but the plan covers more of the cost when you need medical care and begins sharing the cost of your care sooner.</li>
<li>The Bronze plan premiums are the lowest, but you will pay more of your medical care costs.</li>
<li>The Silver plan is in the middle.</li>
</ul>
<li><b>Are you and your family generally healthy, often just getting preventive care during the year? </b></li>
<ul>
<li>Take a closer look at the Bronze plan.</li>
</ul>
<li><b>Does someone have a chronic condition or a potential surgery expected in 2019?</b></li>
<ul>
<li>Consider the Gold and Silver plans since you know you will have significant medical expenses.</li>
</ul>
<li><b>Do you or a family member take prescription drugs regularly?</b></li>
<ul>
<li>The Gold plan pays a higher percentage of the cost of medications.</li>
</ul>
</ol>
You don’t have to figure it out by yourself. Visit ALEX®, your virtual benefits counselor, to help you decide which plan will work best for you and your family next year. <br>
</p>
</div>
We know there are many things to consider, so ask yourself some of the following questions to help narrow down your choices.
It would be great if anyone can help me with this.Thanks
Upvotes: 3
Views: 526
Reputation: 5013
You're very much on the right track, but you need to take into account the fact that you're nesting lists.
ul li
will apply styles to any li
within that ul
, including those within a nested list. So you need to make sure you only target direct children, using ul > li
, and ol > li
.
Here's the applied changes:
ul {
padding-left: 20px;
}
ul > li {
list-style: none;
position: relative;
margin-bottom: 7px;
}
ul > li:before {
color: #F5C400;
content: '\2022';
font-size: 1.2em;
position: absolute;
top: -.2em;
left: -1em;
}
ul li ul li:before {
content: '\25cB';
}
.nav-item:before {
content: '';
padding: 0;
}
ol > li {
list-style-type: none;
counter-increment: list;
position: relative;
}
ol > li:before {
content: counter(list) ".";
position: absolute;
left: -2em;
text-align: right;
color: #893579;
}
<div class="card-body">
<p>We know there are many things to consider, so ask yourself some of the following questions to help narrow down your choices.
<ol>
<li><b>Do you prefer to pay more out of your paycheck (premiums) and less when you get medical care or the other way around? </b></li>
<ul>
<li>The Gold plan premiums are quite a bit higher, but the plan covers more of the cost when you need medical care and begins sharing the cost of your care sooner.</li>
<li>The Bronze plan premiums are the lowest, but you will pay more of your medical care costs.</li>
<li>The Silver plan is in the middle.</li>
</ul>
<li><b>Are you and your family generally healthy, often just getting preventive care during the year? </b></li>
<ul>
<li>Take a closer look at the Bronze plan.</li>
</ul>
<li><b>Does someone have a chronic condition or a potential surgery expected in 2019?</b></li>
<ul>
<li>Consider the Gold and Silver plans since you know you will have significant medical expenses.</li>
</ul>
<li><b>Do you or a family member take prescription drugs regularly?</b></li>
<ul>
<li>The Gold plan pays a higher percentage of the cost of medications.</li>
</ul>
</ol>
You don’t have to figure it out by yourself. Visit ALEX®, your virtual benefits counselor, to help you decide which plan will work best for you and your family next year. <br>
</p>
</div>
Upvotes: 1