I'm trying to set a footer with css and I need to have 2 lines

I have this css:

            @page {
            size: letter;
            margin: 15mm;
            @top-center {
                font-family: Arial Unicode MS;
                content: "Header stuff- blah blah";
            }

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

        }

I have a Visualforce page that is converted into a PDF and the CSS works great at giving a page counter on the bottom of every page. Ultimately a VF page just has html contained in it.

I want to add a URL that appears in the footer above the page counter on every page and I haven't been able to figure it out.

Any ideas?

Thanks!

Solution

You need two things:

inject the newline which normally isn't allowed in content, this can be done with \A (A in hexadecimal = 10 in decimal. "New line", commonly shown as \n is 10th character in ASCII tables)

you need to respect that newline, out of the box multiple spaces, tabs etc are happily ignored in HTML (that's why we use <br> etc)

<apex:page sidebar="false" showHeader="false" applyHtmlTag="false" 
    standardStylesheets="false" readonly="true"
    renderAs="pdf">
    <html>
        <head>
            <style type="text/css">
            @page {
                size: A5 landscape;
                @bottom-right {
                    content: "https://stackoverflow.com\A" counter(page) " of " counter(pages);
                white-space: pre-line;
                }
            }
            </style>
        </head>
    </html>
</apex:page>