Changing the Position of List Markers in CSS

CSSWeb DevelopmentFront End Technology

The CSS list-style-position property is used to set marker position of list items. The default value for this property is outside which sets the marker outside the list item.

Syntax

The syntax of CSS list-style-position property is as follows −

Selector {
   list-style-position: /*value*/
}

Example

The following examples illustrate CSS list-style-property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
li {
   width: 50%;
   margin: 5px;
   font-size: 120%;
   box-shadow: 0 0 3px 1px black;
   background: url("https://www.tutorialspoint.com/dbms/images/dbms.jpg") no-repeat 32px 8px;
   list-style-position: inside;
   padding: 0 0 10px 20px;
}
ol ol li {
   list-style: lower-roman;
   list-style-position: outside;
}
</style>
</head>
<body>
<ol>
<li>Black</li>
<li>
Blue
<ol>
<li>Green</li>
<li>Red</li>
</ol>
</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   width: 200px;
   box-shadow: inset 0 0 6px green;
   list-style-position: outside;
}
ul + ul {
   list-style-type: circle;
   list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>

Output

This gives the following output −

raja
Published on 06-Jan-2020 12:42:02
Advertisements