CSS @bottom-right At-Rule
The @bottom-right at-rule defines a page-margin box along the bottom-right 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-right Syntax
@page {
@bottom-right {
content: value;
}
}The @bottom-right 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-right page-margin box.
How @bottom-right Works
When a document is formatted for paged media, the page box includes margin areas surrounding the page content. The @bottom-right at-rule targets the right portion of the bottom page margin.
The box appears between the @bottom-center and @bottom-right-corner 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-right margin box. It can contain static text or generated values such as the current page number.
@page {
@bottom-right {
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-right 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-right Example
The following example displays the current page number in the bottom-right margin of each printed page.
@page {
margin: 1in;
@bottom-right {
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-right margin area of each page.
Specifications
The @bottom-right at-rule is defined as a page-margin at-rule in the CSS Paged Media Module Level 3 specification.