Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create a List with Dashes in HTML?
A list is any information that is displayed in a logical or linear format. It is a collection of items written in a meaningful group or sequence and denoted by bullet points, numbers, and so on. HTML Lists aid in the semantic display of a list of information. In HTML, there are three types of lists:
-
Unordered list or Bulleted list (ul)
The list items in an HTML unordered list are not in any particular order or sequence. Because the items are marked with bullets, an unordered list is also known as a Bulleted list. It begins with the
<ul>tag and ends with the</ul>tag. The list items are separated by the<li>tag and end with the</li>tag. -
Ordered list or Numbered list (ol)
In HTML, all list items in an ordered list are marked with numbers rather than bullets by default. An ordered list in HTML begins with the
<ol>tag and ends with the</ol>tag. List items begin with the<li>tag and end with the</li>tag. -
Description list or Definition list (dl)
The list items in an HTML Description or Definition List are organized like a dictionary or encyclopedia. There is a description for each item in the description list. A description list can be used to display items such as a glossary. To make a description list, you'll need the following HTML tags:
<dl> (Definition list) tag
<dt> (Definition Term) tag
<dd> (Definition Description) tag
</dl> (Definition list) closing tag
While HTML provides default list styles, you can customize list markers using CSS to create lists with dashes instead of traditional bullets or numbers.
Syntax
Following is the basic HTML syntax for an unordered list
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
To create a list with custom dash markers, we combine HTML structure with CSS styling
ul {
list-style-type: none;
}
ul li::before {
content: "-";
margin-right: 10px;
}
List Style Type
The list-style-type specifies the type of list-item marker that will be used in a list. The marker's color will be the same as the computed color of the element to which it applies. Only a few elements (<li> and <summary>) have display: list-item as their default value.
The list-style-type property, on the other hand, can be applied to any element whose display value is set to list-item. Additionally, because this property is inherited, it can be set on a parent element (typically <ol> or <ul>) to apply to all list items. Following is the syntax
list-style-type: value;
There are numerous values for the list style type property, some of them include disc, circle, decimal, square, lower-alpha, upper-alpha etc.
In order to have a custom value like a dash, we can use CSS properties. In this tutorial we will create an unordered list with dashes using certain pseudo elements and properties of CSS.
Using CSS the "::before" Pseudo Element
A CSS pseudo-element is a keyword added to a selector that allows you to style a specific part of the selected element(s). Following is the syntax
selector::pseudo-element {
property: value;
}
-
In CSS, ::before creates a pseudo-element that is the selected element's first child. It is frequently used with the content property to add cosmetic content to an element. By default, it is inline.
-
The CSS content property substitutes a generated value for an element. Objects inserted with the content property are replaced with anonymous elements. It is generally used with the ::before and ::after pseudo elements.
-
If we want to have an unordered list styled with dashes instead of bullets, we can use the CSS ::before pseudo-element with the content property.
Example Basic Dash List
The example below creates a list with dashes by setting the list-style-type to none and using the ::before pseudo element along with the content property
<!DOCTYPE html>
<html>
<head>
<title>How to Create a List With Dashes in HTML?</title>
<style>
ul {
list-style-type: none;
color: darkslateblue;
font-family: Arial, sans-serif;
padding-left: 0;
}
ul li {
margin-bottom: 5px;
}
ul li::before {
content: '\2013';
margin-right: 10px;
color: darkslateblue;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Famous Celebrities</h3>
<ul>
<li>Virat Kohli</li>
<li>P. V. Sindhu</li>
<li>Narendra Modi</li>
<li>Deepika Padukone</li>
</ul>
</body>
</html>
The output of the above code displays a clean list with en-dash markers
Famous Celebrities - Virat Kohli - P. V. Sindhu - Narendra Modi - Deepika Padukone
In the above example \2013 is used as a hex code point for an en-dash character.
Example Indented Dash List
This particular example creates an unordered list having an indented list effect with dashes by using the text-indent property
<!DOCTYPE html>
<html>
<head>
<title>How to Create a List With Dashes in HTML?</title>
<style>
ul {
margin: 10px 0;
font-family: Arial, sans-serif;
}
ul.dash {
list-style-type: none;
padding-left: 20px;
}
ul.dash li {
text-indent: -20px;
margin-bottom: 5px;
}
ul.dash li::before {
content: "- ";
color: #333;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Famous Celebrities</h3>
<ul class="dash">
<li>Virat Kohli</li>
<li>P. V. Sindhu</li>
<li>Narendra Modi</li>
<li>Deepika Padukone</li>
</ul>
</body>
</html>
The output shows a properly indented list with consistent dash alignment
Famous Celebrities - Virat Kohli - P. V. Sindhu - Narendra Modi - Deepika Padukone
Using Different Dash Characters
You can use various dash characters to create different visual effects in your lists. Here are some common dash characters and their CSS content values
| Character | CSS Content | Description |
|---|---|---|
| - | content: '\2013'; | En-dash (medium length) |
| ? | content: '\2014'; | Em-dash (longer) |
| - | content: '-'; | Hyphen-minus (shortest) |
| ? | content: '\2022'; | Bullet (alternative) |
Example Different Dash Styles
Following example demonstrates different dash characters in lists
<!DOCTYPE html>
<html>
<head>
<title>Different Dash Styles</title>
<style>
ul {
list-style-type: none;
font-family: Arial, sans-serif;
margin-bottom: 20px;
padding-left: 0;
}
ul li {
margin-bottom: 5px;
}
.en-dash li::before {
content: '\2013 ';
color: blue;
}
.em-dash li::before {
content: '\2014 ';
color: green;
}
.hyphen li::before {
content: '- ';
color: red;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>En-dash Style</h3>
<ul class="en-dash">
<li>First item</li>
<li>Second item</li>
</ul>
<h3>Em-dash Style</h3>
<ul class="em-dash">
<li>First item</li>
<li>Second item</li>
</ul>
<h3>Hyphen Style</h3>
<ul class="hyphen">
<li>First item</li>
<li>Second item</li>
</ul>
</body>
</html>
The output displays three different dash styles with different colors
En-dash Style - First item (blue en-dash) - Second item (blue en-dash) Em-dash Style ? First item (green em-dash) ? Second item (green em-dash) Hyphen Style - First item (red hyphen) - Second item (red hyphen)
8K+ Views
