Add the word Step before numbering.

[WebHelpppp]

Hi,

What would the css be to add the word "Step" before each number in an ordered list?

Step 1: xxxx
Step 2: xxxx

Also, I am curious what the css would be if using <p> class.

Thanks!

[kwag_myers]

Ordered list:

Code: Select all

ol li:before
{
	counter-increment: level1;
	content: "Step " counter(level1) ": ";
}

Same for paragraph:

Code: Select all

p.list:before
{
	counter-increment: level1;
	content: "Step " counter(level1) ": ";
}

[WebHelpppp]

Thanks for the code. This is strange I tried using the p.list and it doesn't display in the Styles pod, but if I right-click on the <p> and select Style Class List does display. Is it supposed to work that way?

[kwag_myers]

Flare doesn't seem to like the :before element. If you delete that syntax from the CSS, the style displays (which does you no good, only to prove my point). I'm just learning about pseudo elements, so I can't really say why. I've notice some use a double colon (::before), but that doesn't work for this issue either.

If you have a lot of content to develop, you may want to leave the element out of your CSS until you're ready to build. Then you can access the style from the Styles menu as you work.

[Paulie]

Hi there,

The last time I tested :before and :after pseudo classes in Flare, they only worked in online outputs and not in print. This may or may not be an issue any more (or at all if you are only building online outputs), but it is worth mentioning.

In my case, we used the mc-autonumber-format Flare property to achieve what we wanted, instead of using pseudo classes, as this worked as expected in all outputs.

Sorry, I can't expand on this as much as I'd like due to this week being software release week at my work. But I thought it was at least mentioning this, so that you are aware of this property.

[kwag_myers]

mc-autonumber-format was my first thought, but I ran into some issues with it. You can try:

Code: Select all

p.list
{
	mc-auto-number-format: 'Step {n+}: ';
}

You may run into trouble with having more than one list in a topic, where subsequent lists do not start with 1. The only workaround I know of is to have another style for the first list item:

Code: Select all

p.listfirst
{
	mc-auto-number-format: 'Step {n=1}: ';
}

[Paulie]

I suspect that you are right. For a real ordered list, you could probably use the ol element to reset the numbering for each list.

Code: Select all

ol {
mc-auto-number-format: '{ =0}';
}

For a paragraph element, you would probably have to create a class to reset the numbering, or place the paragraph inside some other element (maybe a div) that resets the numbering.

[dorcutt]

Yes, what kwag described is exactly the method that I use to do this. I have a Step style and a Step1 style. It works fine in print and HTML5.

One tip is that I found it's a better practice to not use "Step1" for the first step in every topic. That way, if you add another step at the beginning of the topic, you're not likely to forget about the Step1 style and accidentally have two consecutive Step 1s when output is generated. I generally only use the Step1 style when there's a topic that has multiple sections, such as a Method A/B/C that show alternative means of accomplishing the same task.