CODEWITHSUNDEEP
flying-saucer
joshua miller
joshua miller

Reputation: 1756

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.

Upvotes: 3

Views: 1130

Answers (2)

Suma
Suma

Reputation: 34463

Besides of CSS2.1 pseudo-elements listed in the CSSParser, which are:

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

Flying Saucer supports following pseudo-elements for output rendering:

  • first-child
  • even
  • odd
  • last-child

Some browser related/interactive pseudo-elements are supported as well:

  • link
  • visited
  • hover
  • focus
  • active

See the source code of addPseudoClassOrElement.

Upvotes: 4

obourgain
obourgain

Reputation: 9366

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

Upvotes: 3

Related Questions