Standard list items often look messy when text wraps to multiple lines. Instead of using a plain vertical line or unreliable text characters, you can build a clean, individual bracket shape around each list item using CSS borders. This method is lightweight, requires no edits to your HTML files, and keeps the top and bottom corners perfectly aligned, no matter how long the text gets.
This is also used on our sites. It adds something to the list that makes it feel more natural and better presents the content to the user than a standard list.
What a Bracket List Is and Where to Use It
A bracket list is a styling layout that replaces standard bullet points or solid vertical lines with an individual bracket [ shape on the left side of every single list item.
Instead of drawing one continuous line down an entire list, this approach groups each item into its own visual container. It is incredibly useful for:
  • Step-by-Step Instructions: Helping readers follow a guide without getting lost in dense blocks of text.
  • Glossaries and Definitions: Framing terms and their descriptions cleanly.
  • Technical Docs: Isolating independent parameters or settings so they look structured and distinct.
This layout works exceptionally well when you have a mix of short single-line items and longer multi-line paragraphs, as it keeps the structure uniform across the page.
Live Template Example - Custom CSS Bracket Lists
How to Use and Implement the System
The best way to handle this layout is to keep your content files clean and let CSS do all the visual heavy lifting. By dropping a single pseudo-element into your main stylesheet, the bracket shapes will automatically generate across your entire site.
  1. The HTML Structure: The HTML file does not need any inline styles, extra divs, or complex formatting. It uses a standard list wrapper and standard items with a specific class name.
    [HTML - UL List]
    CFFCS | CarrzSynEdit: | HTML (Hyper Text Markup Language) 
    <ul class="cff-step-list">
    <li class="step">Short single-line item.</li>
    <li class="step">This is a much taller list item. It contains extra text to force a line break, demonstrating how the vertical bracket line dynamically expands to match the height of the item content perfectly.</li>
    <li class="step">Another short item.</li>
</ul>

  2. The CSS Stylesheet: To make the bracket shape, remove the standard border-left
    Copy
    Search Site
    Search Google
    from the main list item and move it onto an empty ::after
    Copy
    Search Site
    Search Google
    pseudo-element.
    By setting the coordinates to top: 0; bottom: 0;
    Copy
    Search Site
    Search Google
    , the browser automatically stretches the vertical line and pins the top and bottom right-angle caps exactly to the edges of the text box.
    [CSS - List CSS]
    CFFCS | CarrzSynEdit: | CSS (Cascading Style Sheets) 
    /* Container setup and counter reset */
.cff-step-list {
    margin: 15px 0 25px 25px;
    list-style: none;
    counter-reset: my-counter;
    padding-left: 15px;
}

/* Base item setup */
.cff-step-list .step {
    margin: 5px 0;
    padding: 1px 2px 1px 5px;
    position: relative;
    counter-increment: my-counter;
}

/* Custom list numbers placed out of the way on the left */
.cff-step-list .step::before {
    content: counter(my-counter) ". ";
    position: absolute;
    left: -28px;
    top: 1px;
    font-weight: bold;
    text-align: right;
    width: 25px;
}

/* The Bracket Engine: Draws the top, left, and bottom lines */
.cff-step-list .step::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px; /* Adjust this to change how far the top/bottom ticks stick out */
    
    border-left: 1px solid #d6dce8;
    border-top: 1px solid #d6dce8;
    border-bottom: 1px solid #d6dce8;
    
    pointer-events: none; /* Keeps text selectable and clickable */
}

/* Hover background accent */
.step:hover {
    background-color: #e1f1fa;
}

[Why This Approach Is Reliable]
Using pure CSS borders avoids the classic layout bugs caused by typing raw keyboard symbols like ┌
Copy
Search Site
Search Google
or └
Copy
Search Site
Search Google
. Unicode characters change size based on a user's font size, browser zoom, and operating system, which usually results in misaligned gaps.
Because this setup uses native browser rendering rules, it draws straight pixels that adapt instantly to any display size. If you ever want to change the look, tweaking the width
Copy
Search Site
Search Google
or color properties in your main CSS file updates your entire website instantly with zero downtime.