Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Changing the Position of List Markers in CSS
The CSS list-style-position property is used to set the marker position of list items. The default value for this property is outside which sets the marker outside the list item. It is having the following values −
inside − The bullet points are positioned inside the list item
outside − Default. The bullet points are positioned outside the list item
Syntax
The syntax of CSS list-style-position property is as follows −
Selector {
list-style-position: /*value*/
}
The following examples illustrate CSS list-style-property −
Position List Markers Outside the List Items
We have positioned the list markers outside the list items using the list-style-position property with the value outside −
list-style-position: outside;
Example
Let us see the example to position list markers outside the list items −
<!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: outside;
padding: 0 0 10px 20px;
}
</style>
</head>
<body>
<h1>Colors</h1>
<ol>
<li>Black</li>
<li>Blue</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>
Position List Markers Inside the List Items
We have positioned the list markers inside the list items using the list-style-position property with the value inside −
list-style-position: inside;
Example
Let us see an example to position the list markers inside the list items −
<!DOCTYPE html>
<html>
<head>
<style>
li {
width: 50%;
margin: 5px;
font-size: 120%;
box-shadow: 0 0 3px 1px black;
list-style-position: inside;
padding: 0 0 10px 20px;
}
</style>
</head>
<body>
<h1>Colors</h1>
<ol>
<li>Black</li>
<li>Blue</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>
Position List Markers With Adjacent Sibling Selector
In this example, we have positioned the immediate next list inside using the adjacent sibling selector. The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the first selector. The + sign is used as a separator. For example, the direct next element is selected here with the adjacent sibling selector concept −
ul + ul {
list-style-type: circle;
list-style-position: inside;
}
Example
Let us see an example to position the list markers with adjacent sibling selector −
<!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>
4K+ Views
