diff --git a/docs/render/recipe.css b/docs/render/recipe.css
index ddec0fd..7a6bba1 100644
--- a/docs/render/recipe.css
+++ b/docs/render/recipe.css
@@ -166,6 +166,22 @@ ul.step {
   padding: 0;margin: 0em;
 }
 
+ul.step:after {
+  content: "";
+  display: block;
+  width: 5em;
+  height: 0.5px;
+  background-color: currentColor;
+  opacity: 1;
+  border:none;
+  margin: 1em 0 0.2em 0 ;
+}
+
+ul.step.header:after,
+ul.step:last-child:after {
+  display:none;
+}
+
 .instructions:not(.numbered) .number {
   display: none;
 }
diff --git a/docs/render/recipe.js b/docs/render/recipe.js
index 2bd23c0..193c642 100644
--- a/docs/render/recipe.js
+++ b/docs/render/recipe.js
@@ -444,16 +444,21 @@ function render() {
   let step = 1;
   function renderInstructions(instruction, terms) {
     if (Array.isArray(instruction)) {
-      // if (Array.isArray(instruction[0])) instruction = instruction.flat();
-      return [m("hr"), m("ul.step", instruction.map(i => renderInstructions(i, terms)))];
+      let instructions = instruction.map(i => renderInstructions(i, terms));
+      let className = "step";
+      console.log(instructions[0].tagName, instructions[0].tagName=="H3")
+      if (instructions[0].tagName=="H3") className = "step header"
+      return m("ul", {className}, instructions);
     }
 
     let text = (instruction?.text || instruction);
-    if (text?.startsWith("= ")) return m("h3", text.substring(2));
-
     if (!text) return;
+
+    if (text?.startsWith("= ")) return m("h3", text.substring(2));
+    if (text?.endsWith(":")) return m("h3", text);
+
     return m("li", { onclick: highlightStep }, 
-      m("span.number" + (step>9 ? ".big" : ""), `${step++}`),
+      m("span.number" + (step > 9 ? ".big" : ""), `${step++}`),
       m("span.substep",{innerHTML:highlightTimes(highlightTerms(FRACTION_MAP.replace(text.trim()), terms))}))
   }