Changing ol and li html tags to have “Steps” and Hanging indent.
Let’s say you want to have a list of items. However, you want the word “Step” before each number in the list. You may be tempted to not use the ol and li tags and just write the list.
Step 1 – Do something.
Step 2 – Do something else.
However, it will be obnoxious to type “Step” every time. The list doesn’t scale either. If the list gets long and you want to reorder the list, or even add a step, you have to change every number. Also, what if you want a hanging indent? How are you going to do that?
Well, just use these CSS classes.
ol.Steps {
counter-reset: section;
list-style-type: none;
padding: 0;
padding-left: 55px;
}
ol.Steps li {
text-indent: -55px;
}
ol.Steps li:before {
counter-increment: section;
content: "Step " counter(section) " - "; // Change to ": " if you like
}
Here is some sample html:
<ol class="Steps"> <li>The first thing to do.</li> <li>The second thing to do.</li> <li>The third thing to do. However, this step is really, really long. In fact, it is so long that the instructions to do this step wrap all the way into multiple lines.</li> <li>The fourth thing to do.</li> </ol>
Here is how it looks:
- The first thing to do.
- The second thing to do.
- The third thing to do. However, this step is really, really long. In fact, it is so long that the instructions to do this step wrap all the way into multiple lines. No really. It has to go one multiple lines, even if the screen is really, really big.
- The fourth thing to do.
removable hair Extensions
Changing ol and li html tags to have a word before the number | Rhyous