All geek questions in one place

How to change the style in a list (ordered list and unordered list) in HTML?

How to change the style in the list?

1. First 2. Second 3. Third

I want my list to look like

 1) First 2) Second 3) Third

Now the question is how to change the point . brackets ) or something we like ??

I start with HTML, so the question seems rather inconvenient. Please help me with this question.

+4
source share
4 answers

Here you go.

WORKING DEMO

HTML:

 <ul style="list-style-type:decimal;"> <li>First</li> <li>Second</li> <li>Third</li> </ul>

CSS:

 li{ position: relative; } li:before{ position: absolute; left: -13px; content: ')'; background:white;}

Hope this helps.

+5
source

We can get this by doing the following:

 <ol> <li>First</li> <li>Second</li> <li>Third</li> </ol>

and then adding style

 ol { counter-reset: list; } ol li { list-style: none; } ol li:before { content: counter(list, decimal) ") "; counter-increment: list; }
+3
source

try this code

CSS

 ol{margin:0; padding:0; text-decoration:none;} ol {list-style-type: none;} li:before {content: "" counter(section, decimal) ") ";} li { counter-increment: section;} li{margin:0; padding:0; text-decoration:none; color:#ff9900; font-size:14px; font-family:arial;}

HTML

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

Hope this helps you.

See demo

+2
source

You can try this with css here content: will add an element to your listing, you can also change ) to other characters

 <html> <head> <title>Title Here</title> </head> <body> <style type="text/css"> ol { counter-reset: item; margin-left: 0; padding-left: 0; } li { display: block; margin-bottom: .5em; margin-left: 2em; } li:before { display: inline-block; content: counter(item) ") "; counter-increment: item; width: 2em; margin-left: -2em; } </style> <ol> <li>First</li> <li>Second</li> <li>Third</li> </ol> </body> </html>
+2
source

Source: https://habr.com/ru/post/1500657/

More articles:


All Articles