CSS @bottom-left-corner At-Rule
The @bottom-left-corner at-rule defines a page-margin box in the bottom-left corner of a printed page. It is nested inside the @page at-rule and can display generated content such as text, page information, or other footer content.
@bottom-left-corner Syntax
@page {
@bottom-left-corner {
content: value;
}
}The @bottom-left-corner 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-corner page-margin box.
How @bottom-left-corner Works
When a document is formatted for paged media, the @bottom-left-corner at-rule targets the margin box located where the left and bottom page margins meet.
Unlike the @bottom-left margin box, which occupies part of the bottom edge of the page, the @bottom-left-corner box occupies the corner area between the page's left and bottom margins.
Generated Content
The content property determines what appears in the bottom-left-corner margin box. The content can include text, counters, and other generated values supported by paged media.
@page {
@bottom-left-corner {
content: counter(page);
}
}In this example, the built-in page counter displays the current page number in the bottom-left corner of each page.
Page-Margin Box
The @bottom-left-corner margin box has a fixed position determined by the page's left and bottom margins. Its dimensions correspond to the width of the left page margin and the height of the bottom page margin.
Supported page-margin properties can control the box's background, borders, color, fonts, padding, text alignment, vertical alignment, and other aspects of its presentation.
@bottom-left-corner Example
The following example places the current page number in the bottom-left corner of each printed page.
@page {
margin: 1in;
@bottom-left-corner {
content: counter(page);
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
}
}In a paged-media environment that supports page-margin boxes, the generated page number appears where the left and bottom page margins intersect.
Specifications
The @bottom-left-corner at-rule is defined as a page-margin at-rule in the CSS Paged Media Module Level 3 specification.