CSS @bottom-left At-Rule
The @bottom-left at-rule defines a page-margin box along the bottom-left area of a printed page. It is nested inside the @page at-rule and can display generated content such as page numbers, document information, or other footer content.
@bottom-left Syntax
@page {
@bottom-left {
content: value;
}
}The @bottom-left at-rule is a page-margin at-rule and must be nested inside an @page rule. Its block contains declarations that control the content and presentation of the bottom-left page-margin box.
How @bottom-left Works
When a document is formatted for paged media, the page box includes margin areas surrounding the page content. The @bottom-left at-rule targets the left portion of the bottom page margin.
The box appears between the @bottom-left-corner and @bottom-center margin boxes. Its size can adjust according to the available space and the content of the neighboring bottom margin boxes.
Generated Content
The content property specifies what appears in the bottom-left margin box. It can contain static text or generated values such as the current page number.
@page {
@bottom-left {
content: "Page " counter(page);
}
}The built-in page counter represents the current page number and can be combined with text to create a page footer.
Page-Margin Box
The @bottom-left margin box can be styled with supported page-margin properties, including backgrounds, borders, color, fonts, margins, padding, text alignment, and other formatting properties.
The margin box is positioned within the page's bottom margin rather than the normal document content area. Sufficient page margin should be provided when the box contains visible generated content.
@bottom-left Example
The following example displays the current page number in the bottom-left margin of each printed page.
@page {
margin: 1in;
@bottom-left {
content: "Page " counter(page);
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
}In a paged-media environment that supports page-margin boxes, the generated page number appears in the bottom-left margin area of each page.
Specifications
The @bottom-left at-rule is defined as a page-margin at-rule in the CSS Paged Media Module Level 3 specification.