Odd behavior CSS "content" property in kobo devices

[DrChiper]

Can anybody confirm that an ::after pseudo-element with a content property does not work for kobo devices?
Like:

.title::after {
  position: absolute;
  content: " . . . . . . . ";
  text-align: right;
}

I have an ebook in which it is used for creating dot trailers/leaders in some table of contents construct, but the dots never show within kobo, while they can be observed in the calibre viewer/editor.

[enuddleyarbl]

I've got a couple of classes in my standard stylesheet using ::after and don't have any problems with them on my Kobos. I'm not knowledgeable enough on this to give you a solution. But, I worry about your "position: absolute" without specifying actual positions or widths.

[DrChiper]

Well, I did some investigations and found that of my 20K+ books just about 30 did use the content property, and most of them in the form of:

.something::after {
  content: " ";
 . . .
}

so you would not see it anyway.

My technical library however made intensive usage of that construct, like:

section[data-type="titlepage"]:after {
  content: url(../Images/ebook.png);
  position: absolute;
  bottom: 0;
  max-width: 100%;
}

Placing such a book on my kobo did reveal that the picture did show up on my PC (within calibre), but not on the kobo (=empty space).
Therefore my preliminary conclusion is that kobo ignores the content property. The ::after (and ::before) pseudo-element(s) do work however.

To be complete: the used ebooks were epubs, not kepub.

[JSWolf]

Originally Posted by DrChiper

Well, I did some investigations and found that of my 20K+ books just about 30 did use the content property, and most of them in the form of:

.something::after {
  content: " ";
 . . .
}

so you would not see it anyway.

My technical library however made intensive usage of that construct, like:

section[data-type="titlepage"]:after {
  content: url(../Images/ebook.png);
  position: absolute;
  bottom: 0;
  max-width: 100%;
}

Placing such a book on my kobo did reveal that the picture did show up on my PC (within calibre), but not on the kobo (=empty space).
Therefore my preliminary conclusion is that kobo ignores the content property. The ::after (and ::before) pseudo-element(s) do work however.

To be complete: the used ebooks were epubs, not kepub.

Pseudo elements will not work with ePub on a Kobo because the version of RMSDK (ADE) used to read ePub is too old. It should work with KePub.

This is why these eBooks should not be using Pseudo elememnts and should be using spans instead. It's best ti make the ePub as backwards compatible as possible.