Search code examples
flying-saucer

Does flying saucer support pseudo elements


I have been trying to add pseudo elements with content into the CSS for a page that is being converted with the Flying Saucer library. When viewing the page in a regular browser as HTML, the code works fine and I can see the pseudo element (:before). When rendering the PDF using Flying Saucer however, the pseudo element disappears.

According to the official Flying Saucer spec, CSS 2.1 is supported so that should include pseudo elements and content attributes. So why isn't it working for me? All other CSS is working fine.


Solution

  • Flying-saucer supports the following CSS pseudo elements:

    • before
    • after
    • first-line
    • first-letter

    It only supports the standard, double-colon CSS3 syntax (::after), and not the old, single-colon CSS2 syntax (:after).

    Here is a working example:

    <html>
    <head>
    <style>
      div::before {content: "before - "}
      div::after  {content: " - after"}
      p::first-line   {font-weight:bold}
      p::first-letter {color:blue}
    </style>
    </head>
    <body>
      <div>A div</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed scelerisque augue. Nulla eleifend aliquet tortor, vel placerat velit fringilla vitae. Sed quis sem eu arcu dapibus convallis.</p>
    </body>
    </html>
    

    And the result (using flying-saucer 9.1.6): PDF showing pseudo element applied