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
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> tag (Definition Description)
</dl> tag (Definition list)
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, Hebrew, 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 si 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
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;
}
ul li:before {
content: '\2013';
position: absolute;
margin-left: -15px;
}
</style>
</head>
<body>
<p>Famous Celebrities</p>
<ul>
<li>Virat Kohli</li>
<li>P. V. Sindhu</li>
<li>Narendra Modi</li>
<li>Deepika Padukone</li>
</ul>
</body>
</html>
In the above example 2013 is used as a hex code point for dash.
Example
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;
}
ul.dash {
list-style-type: none;
}
ul.dash > li {
text-indent: -20px;
}
ul.dash > li:before {
content: "-";
text-indent: -20px;
}
</style>
</head>
<body>
<p>Famous Celebrities</p>
<ul class="dash">
<li>Virat Kohli</li>
<li>P. V. Sindhu</li>
<li>Narendra Modi</li>
<li>Deepika Padukone</li>
</ul>
</body>
</html>
1K+ Views
