counter-increment with formatting in html css
Question
I am able to set the counter/index value which works fine. But unable to format the output as shown below.
Required Result
But the result which i am getting is
not to worry about colors which i can handle it.
So the issue is if the words are more then as shown in the image in 1st point the word starts to display below the counter/index value.
So how to display as shown in the above black image where its properly formatted.
Below is the html code
<html> <head> <style>.list { counter-reset: my-sec-counter; width: 300px; } p { border-bottom: 1px solid gray; margin-bottom: 15px; padding-bottom: 15px; } p::before { counter-increment: my-sec-counter; content: counter(my-sec-counter) ". "; padding-right: 20px; color: red; font-weight: 500; font-size: 24px; } </style> </head> <body> <div class="list"> <p>HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial </p> <p>CSS Tutorial</p> <p>JavaScript Tutorial</p> <p>Bootstrap Tutorial</p> <p>SQL Tutorial</p> <p>PHP Tutorial</p> </div> </body> </html>
Note:
tags gets generated from server so can't do much about it. Need to use the p tag itself.
3 answers
solution1
2 ACCPTED 2020-05-14 17:54:23
p::before elements should be the position absolute and p should be position relative. Add some padding-left to p tag and p::before left:0;
Working example in the below
.list { counter-reset: my-sec-counter; width: 300px; background: #070707ed; padding: 30px; } p { border-bottom: 1px solid gray; margin-bottom: 15px; padding-bottom: 15px; position: relative; padding-left: 40px; color: white; } p::before { counter-increment: my-sec-counter; content: counter(my-sec-counter) ". "; padding-right: 20px; color: #FFEB3B; font-weight: 500; font-size: 24px; position: absolute; left: 0; top: 0; } <div class="list"> <p>HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial </p> <p>CSS Tutorial Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid asperiores ducimus facilis mollitia nam necessitatibus porro, quaerat quas quibusdam quis repudiandae sit sunt, tempora voluptatum. Atque, perferendis quam. Laboriosam.</p> <p>JavaScript Tutorial</p> <p>Bootstrap Tutorial</p> <p>SQL Tutorial</p> <p>PHP Tutorial</p> </div>
solution2
1 2020-05-14 17:57:35
Set this in your css
p {
/* your code */
display:flex
}
When you place the display: flex on the element, the elements that are inside it are the same height and aligned side by side
solution3
0 2020-05-14 17:55:32
Increase or decrease the font sizes as per your need
.list { counter-reset: my-sec-counter; width: 300px; position: relative; padding-left: 30px; counter-reset: counter; background-color: #333; } p { border-bottom: 1px solid gray; margin-bottom: 15px; padding: 5px 0 15px; Color: #fff; position: relative; } p::before { counter-increment: counter 1; content: "" counter(counter); font-size: 20px; color: #FFDB45; position: absolute; left: -20px; top: 0; }
<html> <head> </head> <body> <div class="list"> <p>HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial </p> <p>CSS Tutorial</p> <p>JavaScript Tutorial</p> <p>Bootstrap Tutorial</p> <p>SQL Tutorial</p> <p>PHP Tutorial</p> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.