[JSWolf]

Originally Posted by repilo

I edit ePub with Sigil to add drop caps, for example. They look fine in Sigil, they look fine in Calibre viewer, they look fine in Kindle (converted to azw3 by Calibre). In Kobo however I have to convert to kepub to see it the same as in the other viewers. Kobo ignores some css codes when displaying epub. For example these:

.sc { font-variant:small-caps; text-shadow:.5px .5px 1px #808080; }

.pDropCap { text-indent:0; } /* Use: <p class="pDropCap"> */
.pDropCap:first-letter {
	float:left; font-size:2.98em; margin:-.216em .1em -.3em 0;
	/*float:left; font-size:4.64em; margin:-.254em .08em -.35em 0;*/
	text-shadow:1.5px 1.5px 4px #808080; }
.pDropCap:first-line {
	font-variant:small-caps; text-shadow:.5px .5px 1px #808080; }

This automatically adds drop caps to the p following each h1, and small caps to the first line of said p:

h1:not([class]) ~ p:first-of-type:first-letter {
	float:left; font-size:2.98em; margin:-.216em .1em -.3em 0;
	text-shadow:1.5px 1.5px 4px #808080; }
h1 ~ p:first-of-type:first-line {
	font-variant:small-caps; text-shadow:.5px .5px 1px #808080; }

This converts the text of h2 to uppercase:

h2 { margin:2.8em 0 1.2em; font-size:.945em; font-weight:normal;
		text-transform:uppercase; }

This uses hr for scene breaks, automatically adding three asterisks as separator:

hr { /* Scene break: <hr/> */
    width:0; margin:0; height:2.5em; border:none; background:none; }
hr + p { text-indent:0; }
hr.asteriskS { /* Scene break with ***: <hr class="asteriskS"/> */
	width:100%; height:2.2em; text-align:center; padding-top:.5em; }
hr.asteriskS:before {
	content:"\2217\2217\2217"; letter-spacing:.5em; font-size:1.5em; }

All this, and other figure/figcaption related things, plus footnotes, do not display well or not at all in epub format in Kobo, but display correctly in kepub (and in Sigil, Calibre and Kindle).

You cannot use pseudo classes with RSMDK (the version Kobo uses). You have to stop using psuedo classes and use a span instead.