CSS @left-bottom At-Rule

CSS @left-bottom At-Rule

The @left-bottom at-rule defines content and styling for the lower section of the left margin on a printed page. It is one of the CSS page-margin at-rules and must be nested inside an @page rule. It is commonly used for page numbers, document labels, and other information displayed alongside printed content.

@left-bottom Syntax

@page {
  @left-bottom {
    content: "Text";
  }
}

The @left-bottom rule is written inside an @page block. Its declarations control the content and appearance of the lower left-side margin box.

The content property supplies the generated content. Without generated content, the margin box is normally not displayed.

The rule applies to printed pages and print previews rather than the normal browser viewport.

How @left-bottom Works

CSS paged media divides a printed page into a content area and surrounding margins. The margins contain predefined boxes that can display generated content independently of the document's HTML elements.

The @left-bottom rule controls one of the three boxes along the left side of the page.

@page {
  margin: 25mm;
  @left-bottom {
    content: "Document Reference";
  }
}

This example reserves page margins and places the text "Document Reference" in the lower portion of the left margin.

The generated content can appear on every printed page where the rule applies. It does not need to be repeated in the HTML document.

The available space depends on the page size, margin dimensions, and other margin boxes.

Page Margin Position

The @left-bottom margin box occupies the lower section of the left page margin, beside the main content area.

It is different from @bottom-left, which appears along the bottom edge of the page rather than along its left side.

These margin boxes are part of the printed page layout. They do not use ordinary CSS positioning properties to determine their locations.

Content placed in the left-side margin may be rotated when a vertical label is needed.

Generated Content

The content property determines what appears inside the margin box. It can display fixed text, counters, and other supported generated content.

Displaying Fixed Text

@page {
  margin: 25mm;
  @left-bottom {
    content: "CSS Reference";
  }
}

This displays the same label on each applicable printed page.

Displaying Page Numbers

@page {
  margin: 25mm;
  @left-bottom {
    content: "Page " counter(page);
  }
}

The counter(page) function inserts the current printed page number.

Unlike a counter maintained in the document's HTML content, the predefined page counter reflects pagination in the printed output.

Displaying Total Pages

@page {
  margin: 25mm;
  @left-bottom {
    content: counter(page) " of " counter(pages);
  }
}

In supporting browsers, this displays the current page number followed by the total number of pages, such as "2 of 5".

Styling the Margin Box

Page-margin boxes support several familiar CSS properties, including text alignment, font settings, colors, backgrounds, borders, and transforms.

@page {
  margin: 30mm;
  @left-bottom {
    content: "Page " counter(page);
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #0056b3;
    text-align: center;
  }
}

This example displays a bold blue page number in the lower left-side margin.

Rotating Margin Content

A transform can rotate text to make a vertical label along the page margin.

@page {
  margin: 30mm;
  @left-bottom {
    content: "CSS Documentation";
    font-size: 10pt;
    color: #555;
    transform: rotate(-90deg);
  }
}

The text is rotated 90 degrees counterclockwise. Its exact appearance depends on the available margin space and browser support.

Not every CSS property that works on an ordinary HTML element is supported in page-margin boxes.

Left and Right Pages

The :left and :right page pseudo-classes allow different margin content on left-hand and right-hand pages.

This is useful for documents intended for double-sided printing.

@page :left {
  margin: 25mm;
  @left-bottom {
    content: "Page " counter(page);
  }
}
@page :right {
  margin: 25mm;
  @right-bottom {
    content: "Page " counter(page);
  }
}

On left-hand pages, the page number appears in the lower left margin. On right-hand pages, it appears in the lower right margin.

The @left-bottom at-rule does not automatically restrict itself to left-hand pages. It can be used in a general @page rule or within a page rule selected by :left.

The actual left and right page arrangement depends on pagination and the browser's printing behavior.

@left-bottom Example

The following example creates a printed document with a page number in the lower left-side margin.

HTML

<article>
  <h1>CSS Paged Media Example</h1>
  <p>This document demonstrates page-margin content.</p>
  <p>Use Print Preview to see the page number.</p>
</article>

CSS

@page {
  size: A4;
  margin: 30mm;
  @left-bottom {
    content: "Page " counter(page);
    font-family: Arial, sans-serif;
    font-size: 10pt;
    color: #0056b3;
  }
}
@media print {
  body {
    font-family: Arial, sans-serif;
    color: #222;
  }
}

Open the browser's Print Preview to view the result. In a browser that supports page-margin boxes, the generated page number appears in the lower left margin of the printed page.

The example will not display its margin content in the normal browser window.

Browser Support

The @left-bottom page-margin box has limited availability across browsers. Chromium-based browsers support page-margin boxes, but support is not consistent across all major browser engines. See Can I Use? and search for CSS page margin boxes.

Specifications

The @left-bottom at-rule is defined in CSS Paged Media Module Level 3. It is one of the page-margin at-rules used to create generated content in the margins of printed pages.

CSS Paged Media Module Level 3