How do I style Paged media elements

Question

Neither google nor the @Page documentation nor this link has any info on this.

I have the following code to show page numbers in a footer on the right of the page of the pdf I generate from html :

@page {
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
  }
}

This happily prints Page A of X. How do I style A and X ?

Answer 1

The short answer is that you can't using CSS alone. In order to style A and X separately from the rest of the text, you need to insert elements to wrap A and X like:

 Page <span class="a">A</span> of <span class="b">B</span>

However, you cannot insert tags using the CSS content tag. Thus in order to accomplish this, you should create a footer element (as described here) in HTML, and style it accordingly. For example:

<div class="footer">
    Page <span class="a">A</span> of <span class="b">B</span>
</div>


@media screen {
  div.footer {
    display: none;
  }
}

@media print {
  div.footer {
     position: fixed;
     bottom: 0;
     right: 0;
     padding-right: 30px;
  }

  div.footer a{
     // STYLING FOR A GOES HERE
  }
}