我可以在列表编号中添加文字吗

Question

I have an ordered list like

1. content1
2. content2
3. content3

As it is for a road trip route, I want it to be:

Day 1 : content1

Day 2 : content2

Day 3 : content3

I can of course write it down as text, but i prefer having it as a list. Is this possible?

Answer 1

 ol { position:relative; padding-left: 50px; } ol li:before { content:"Day"; position:absolute; left:0; } 

 <ol> <li>content1</li> <li>content2</li> <li>content3</li> </ol> 

check this

Answer 2

You can do it without positioning the list items - resetting the list and letting pseudo elements to do the rest:

1. Reset the list style using list-style-type:none and padding:0

2. Now use an increment counter to get the required list numbering

See demo below:

 ul { list-style-type: none; padding: 0; counter-reset: list; } ul li:before { content: 'Day ' counter(list) ' : '; counter-increment: list; } 

 <ul> <li>content1</li> <li>content2</li> <li>content3</li> </ul> 

Answer 3

var routes = {}

//add to a list
routes.Day1 = 'Going Here!';
routes.Day2 = 'Resting';
//and keep adding so on

//to print/list the routes
console.log(routes);

//give it the tag and data
function add2html(tag, data) {
   var element = document.getElementById(tag);
   element.replaceWith(data);
};

// to add to day1
add2html('day1', routes.Day1)

Not sure what you're using so defaulting to javascript. Then in html.

<!-- using <li></li> will give you numbers before -->
<ul id="day1"></ul>

Answer 4

You can achieve this by defining it as unordered list. Then in css define ul list-style as none. Then use css before for every li as li:nth-of-type(1) selector with content Day 1:, li:nth-of-type(2) selector with content Day 2: and position it appropriately.