From ec3b5794cac55a5755620fa5e205f0d54c9e343b Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Fri, 16 Aug 2024 11:32:59 +0200 Subject: [PATCH] Add guideline to last step of the `` component (#2051) Co-authored-by: Chris Swithinbank <357379+delucis@users.noreply.github.com> Co-authored-by: Chris Swithinbank --- .changeset/swift-laws-yawn.md | 14 ++++++++++++++ packages/starlight/user-components/Steps.astro | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/swift-laws-yawn.md diff --git a/.changeset/swift-laws-yawn.md b/.changeset/swift-laws-yawn.md new file mode 100644 index 00000000000..89c4178bd97 --- /dev/null +++ b/.changeset/swift-laws-yawn.md @@ -0,0 +1,14 @@ +--- +'@astrojs/starlight': minor +--- + +Adds a guideline to the last step of the `` component. + +If you want to preserve the previous behaviour and hide the guideline on final steps, you can add the following custom CSS to your site: + +```css +/* Hide the guideline for the final step in lists. */ +.sl-steps > li:last-of-type::after { + background: transparent; +} +``` diff --git a/packages/starlight/user-components/Steps.astro b/packages/starlight/user-components/Steps.astro index 66562555437..c66dffb1f43 100644 --- a/packages/starlight/user-components/Steps.astro +++ b/packages/starlight/user-components/Steps.astro @@ -51,7 +51,7 @@ const { html } = processSteps(content); } /* Vertical guideline linking list numbers. */ - .sl-steps > li:not(:last-of-type)::after { + .sl-steps > li::after { --guide-width: 1px; content: ''; position: absolute;