CODEWITHSUNDEEP
htmlcss
Sharath
Sharath

Reputation: 2428

counter-increment with formatting in html css

I am able to set the counter/index value which works fine. But unable to format the output as shown below.

Required Result

enter image description here

But the result which i am getting is

enter image description here

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.

Upvotes: 0

Views: 146

Answers (3)

Luigi Jord&#226;nio
Luigi Jord&#226;nio

Reputation: 32

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

Upvotes: 1

lakshitha madushan
lakshitha madushan

Reputation: 669

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;

enter image description here 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>

Upvotes: 2

Atul Rajput
Atul Rajput

Reputation: 4178

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>

Upvotes: 0

Related Questions