Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS list-style-position Property

Posted in CSS Tutorial
Updated on Oct 03, 2024
By Mari Selvan
👁️ 16 - Views
⏳ 4 mins
💬 1 Comment
CSS list-style-position Property

Photo Credit to CodeToFun

🙋 Introduction

The list-style-position property in CSS is used to specify the position of the list-item marker (such as a bullet or number) in relation to the list item's content. It primarily applies to <ul> (unordered lists), <ol> (ordered lists), and <li> (list items) elements.

By adjusting this property, you can control whether the marker is placed inside or outside the list item's content box, allowing for more flexible styling of lists.

💡 Syntax

The syntax for the list-style-position property is as follows:

Syntax
Copied
Copy To Clipboard
element {
  list-style-position: value;
}

value can be either inside or outside.

🎛️ Default Value

The default value of the list-style-position property is outside. This means that the marker is placed outside the list item's content box by default.

🏠 Property Values

ValueDescription
insideThe marker is placed inside the list item's content box, causing the marker to appear next to the text. If the text wraps to another line, it aligns with the beginning of the text, not the marker.
outsideThe marker is placed outside the list item's content box, causing the marker to appear to the left of the text. The text aligns with the start of the list item, not the marker.

📄 Example

In this example, we will demonstrate the use of list-style-position with an unordered list. The first list uses the default outside value, while the second list uses inside.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS list-style-position Example</title>
  <style>
    .outside {
      list-style-position: outside;
    }
    .inside {
      list-style-position: inside;
    }
  </style>
</head>
<body>
  <h1>List Style Position Example</h1>
  
  <h2>Outside (Default)</h2>
  <ul class="outside">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <h2>Inside</h2>
  <ul class="inside">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

🖥️ Browser Compatibility

The list-style-position property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This broad compatibility makes it a reliable choice for styling list markers in web projects.

🎉 Conclusion

The list-style-position property offers a simple yet powerful way to control the positioning of list-item markers.

Whether you want to place markers inside or outside the list item's content box, this property provides the flexibility to style lists according to your design needs. Experiment with different positions to achieve the desired look for your lists.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy