There is an easy fix (text-indent) to keep the indented list effect with the :before pseudo class.
ul {
margin: 0;
}
ul.dashed {
list-style-type: none;
}
ul.dashed > li {
text-indent: -5px;
}
ul.dashed > li:before {
content: "-";
text-indent: -5px;
}Some text
<ul class="dashed">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Last textW3Schools
w3schools.com › css › css_list.asp
CSS Styling Lists
All the different list-item markers for lists This example demonstrates all the different list-item markers in CSS. ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com · If you want to report an error, or if you want to make a suggestion, send us an e-mail: help@w3schools.com · HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › list-style
list-style - CSS | MDN
The list-style CSS shorthand property allows you to set all the list style properties at once.
Videos
W3Schools
w3schools.com › html › html_lists_unordered.asp
HTML Unordered Lists
The list items will be marked with bullets (small black circles) by default: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> ... The CSS list-style-type property is used to define the style of the list item marker.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › list-style-type
list-style-type - CSS | MDN
The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
W3Schools
w3schools.com › cssref › pr_list-style.php
CSS list-style property
list-style: list-style-type list-style-position list-style-image|initial|inherit; ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com · If you want to report an error, or if you want to make a suggestion, send us an e-mail: help@w3schools.com · HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial
Top answer 1 of 16
265
There is an easy fix (text-indent) to keep the indented list effect with the :before pseudo class.
ul {
margin: 0;
}
ul.dashed {
list-style-type: none;
}
ul.dashed > li {
text-indent: -5px;
}
ul.dashed > li:before {
content: "-";
text-indent: -5px;
}Some text
<ul class="dashed">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Last text 2 of 16
116
You could use :before and content: bearing in mind that this is not supported in IE 7 or below. If you're OK with that then this is your best solution. See the Can I Use or QuirksMode CSS compatibility tables for full details.
A slightly nastier solution that should work in older browsers is to use an image for the bullet point and just make the image look like a dash. See the W3C list-style-image page for examples.
Tailwind CSS
tailwindcss.com › docs › list-style-type
list-style-type - Typography - Tailwind CSS
Utilities for controlling the marker style of a list.
web.dev
web.dev › learn › css › lists
Lists | web.dev
October 26, 2021 - You can also use this shorthand to set styles, like list-style: square inside; So far, the examples have focused on styling an entire list and list items, but what about a more granular approach? The list-item marker element is the bullet, hyphen, or roman numeral that helps indicate each item in your list. If you inspect the list in DevTools, you can see a ::marker element for each of the list items, despite not declaring any in HTML...
GeeksforGeeks
geeksforgeeks.org › css › css-list-style-type-property
CSS list-style-type Property - GeeksforGeeks
August 27, 2024 - Example: In this example, we are using list-style-type: circle; property. ... <!DOCTYPE html> <html> <head> <title>CSS list-style-type Property</title> <style> .geek1 { list-style-type: circle; } </style> </head> <body> <h1 style="text-align: center; color: green"> list-style-type: circle; </h1> <p>Sorting Algorithms</p> <ul class="geek1"> <li>Bubble Sort </li> <li>Merge Sort</li> <li>Insertion Sort</li> </ul> </body> </html>
Shay Howe
learn.shayhowe.com › html-css › creating-lists
Creating Lists - Learn to Code HTML & CSS
In addition to the three different types of lists available within HTML, there are multiple ways to style these lists with CSS. For example, we can choose what type of marker to use on a list. The marker could be square, round, numeric, alphabetical, or perhaps nonexistent.
W3Schools
w3schools.com › cssref › pr_list-style-type.php
CSS list-style-type property
The list-style-type specifies the type of list-item marker in a list.
web.dev
web.dev › articles › creative list styling
Creative list styling | Articles | web.dev
August 24, 2022 - In this article we'll dive into the different HTML list types available to us on the web and when to use them, including some attributes you might not be familiar with. We'll also take a look at some useful and creative ways to style them with CSS.
W3C
w3.org › TR › WD-CSS2 › lists.html
Lists
There is no "list" presentation for other types of list structures (e.g., "definition lists" declared by DL, DT, and DD in HTML). Each part of a definition list is simply a block element. ... This property specifies appearance of the list item marker if 'list-style-image' has the value 'none' or if the image pointed to by the URI cannot be displayed.
MDN Web Docs
developer.mozilla.org › en-US › docs › Learn_web_development › Core › Text_styling › Styling_lists
Styling lists - Learn web development | MDN
When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on GitHub, and find the source code too). The CSS used for the text styling and spacing is as follows: ... /* General styles */ html { font-family: "Helvetica", "Arial", sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul, ol, dl, p { font-size: 1.5rem; } li, p { line-height: 1.5; } /* Description list styles */ dd, dt { line-height: 1.5; } dt { font-weight: bold; }
W3Schools
w3schools.com › tags › tag_li.asp
HTML li tag
The <li> tag also supports the Event Attributes in HTML. ... <ol> <li value="100">Coffee</li> <li>Tea</li> <li>Milk</li> <li>Water</li> <li>Juice</li> <li>Beer</li> </ol> Try it Yourself » ... <ol> <li>Coffee</li> <li style="list-style-typ...
UTMB Health
utmb.edu › web › 4x › components › html-lists
Typography - HTML Lists
There are three main types of lists in HTML: unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>). Within the Sitefinity Content Management System we’ve adopted a consistent use of the same fonts, sizing, color and formatting options so as users are building the website ...
CSS-Tricks
css-tricks.com › list-style-recipes
List Style Recipes | CSS-Tricks
May 5, 2020 - Things line up nicer with list-style-position: outside; (the default value), but the list markers render outside the box, so you have to be careful not to cut them off. They could hang off the edge of the browser window, or overflow: hidden; will hide them completely.
Slider Revolution
sliderrevolution.com › home › css list style examples for modern websites
CSS List Style Examples for Modern Websites
April 24, 2024 - Discover CSS list style examples to transform basic HTML lists. Learn custom markers, bullets, numbering, and advanced styling techniques.
HTML Dog
htmldog.com › references › css › properties › list-style-type
CSS Property: list-style-type | HTML Dog
The style of the list marker bullet or numbering system within a list. Applies to boxes set to display: list-item (of which li HTML elements are by default).
Makethingsaccessible
makethingsaccessible.com › guides › html-lists-for-use-as-content
HTML lists for use as content | Make Things Accessible
October 7, 2022 - The Type attribute is deprecated and an explanation of using style sheets is shown after this. Type examples are shown as you many come across examples of this in old HTML code · Note: Unless the type of the list number matters such as legal or technical documents where items are referenced by their number or letter, use the CSS list-style-type property instead such as lists with 1., 1.1, and 1.1.1 numbers.