Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5/CSS - <ol> with letters and parentheses?

I'd like to know if it's possible to use letters with ")" intead "." in an ordered list. Something like this:

a) Some text...
b) Some text...
c) Some text...

Until now I'm getting:

a.) Some text...
b.) Some text...
c.) Some text...

So I need to eliminate the points.

CSS:

.theclass ol li{
  margin: 0 0 0 1em;
}

.theclass ol li:before{
  content: ') ';
  position: absolute;
  margin-left: -3.4em;
  text-align: right;
  width: 3em;
}

HTML:

<div class="theclass">
 <ol type="a">
   <li>Some text...</li> 
   <li>Some text...</li>  
   <liSome text...  </li> 
 </ol>
</div>  
like image 591
Sergio Avatar asked Nov 11 '15 06:11

Sergio


People also ask

How do you make an ordered list with letters in HTML?

To create ordered list in HTML, use the <ol> tag. Ordered list starts with the <ol> tag. The list item starts with the <li> tag and will be marked as numbers, lowercase letters uppercase letters, roman letters, etc.

What is OL </ OL in HTML?

<ol>: The Ordered List element. The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

How do I start OL from specific alphabet?

The start attribute specifies the start value of the first list item in an ordered list. This value is always an integer, even when the numbering type is letters or romans. E.g., to start counting list items from the letter "c" or the roman number "iii", use start="3".

Is ol tag in HTML5?

The <ol> tag is for an ordered list, an ordered list can be numerical or alphabetical. Inside the <ol> tag you have to make a list <li> of items that will follow the order. Accepted attributes: HTML <ol> compact Attribute: It defines the list should be compacted (compact attribute is not supported HTML5.


1 Answers

I found this.

I don't have enough points to commend. This is not my solution!

Found it here: Ordered list (HTML) lower-alpha with right parentheses?

Example on Jsfiddle

ol {
counter-reset: list;
margin: 0; }

ol > li {
list-style: none;
position: relative; }

ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em; }

I think this is what you are looking for..?

Another answer can be found here: How to remove dot “.” after number in ordered list items in OL LI? answered by Moin Zaman

like image 125
MarLen Avatar answered Sep 18 '22 13:09

MarLen