CODEWITHSUNDEEP
htmlcss
camillavk
camillavk

Reputation: 521

lower the list style to fit the text css

I'm trying to change the style of the list item to fit with the rest of the text (i.e. font size etc) but I can't seem to change it at all.

The code that the list is being created by is:

%ol.question-parts
   - test_question.answers.each do |answer|
      %li.question-text
         %div.question-part-description
           %p=change_math_delims(answer.question_part.description)

The code I have at the moment to show the list is:

ol {
  list-style-type: lower-alpha;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}

li {
  display: list-item;
  padding: 1px 1px 1px 1px;
}

but I want to target the size of the lower-alpha list style...at the moment it is appearing like this:

uneven a

any ideas?

Upvotes: 2

Views: 144

Answers (2)

Bogdan Lazar
Bogdan Lazar

Reputation: 111

I'm not sure how your text and list can be separate. Are you creating the list in your HTML like this: ?

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

JS Fiddle here

Upvotes: 0

Akshay
Akshay

Reputation: 14348

I don't know if this is what you wanted without code

I used content:counter on the li pseudo-element

ol{
    list-style:none;
}

li:before{
    content: counter(list, lower-alpha)".";
  counter-increment: list;
    font-size:30px;
}
<ol>
    <li>Text</li>
     <li>Text</li>
     <li>Text</li>
     <li>Text</li>
     <li>Text</li>
     <li>Text</li>
     <li>Text</li>
</ol>

Upvotes: 1

Related Questions