-3

I'm looking to make custom ol in html with inline css.. I want it to be in this format

(1) text1

(2) text2

(3) text 3

what I thinking to do is

<ol style="counter-increment:section; content:(counter(section));">
<li>text1 </li>
<li>text2 </li>
<li>text3 </li>
</ol>

but it's not working at all.

Community
  • 1
  • 1
Manspof
  • 598
  • 26
  • 81
  • 173

1 Answers1

0

No, You can't specify inline styles for pseudo-elements.

see Using CSS :before and :after pseudo-elements with inline CSS?.

Write as

<style>

ol {
  counter-reset: section1;
  list-style-type: none;
}

ol li {
  counter-increment: section1;
}

ol li:before {
  content: "(" counter(section1) ") ";
  
}
</style>


<ol>
  <li>text1 </li>
  <li>text2 </li>
  <li>text3 </li>
</ol>

OR

ol {
  counter-reset: section1;
  list-style-type: none;
}

ol li {
  counter-increment: section1;
}

ol li:before {
  content: "(" counter(section1) ") ";
  
}
<ol>
  <li>text1 </li>
  <li>text2 </li>
  <li>text3 </li>
</ol>

OR

<ol style="list-style-type: none;">
  <li>(1) text1 </li>
  <li>(2) text2 </li>
  <li>(3) text3 </li>
</ol>
Community
  • 1
  • 1
Tamil Selvan C
  • 19,913
  • 12
  • 49
  • 70
  • 1
    Why are you looking for inline way? Isn't it better to do that in a separate file? – Kuba Wojtach Mar 08 '17 at 13:27
  • because all my project I build in inline way and I don't want to make style tag or another stylesheet. – Manspof Mar 08 '17 at 13:40
  • 1
    You can declare your styles in top of your html page. I do not know how your structure is build, but if my opionion working only with inline styles is a bad practice. answer to your question, declare styles at the top of your page. – Babulaas Mar 08 '17 at 13:46