[odedta]

Hello

I want to create the element attached (Screenshot_2.jpg). AFAIK there are no :before or :after pseudo-selectors in ePub3 so I would have to use an <img> instead of content: "" and absolute positioning is not well supported.

Here is the HTML:

<div class="align-center">

    <img class="bird" src="../images/bird.png" alt="bird" style="left: 41%;"/>

    <h1 class="heading-bird" id="toc_1">Preface</h1>

  </div>

Here is the CSS:

.bird {
  display: block;
  position: relative;
  left: 38%;
  top: 9px;
  margin-left: -3px;
  width: 40px;
}
h1.heading-bird {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  background-color: #4D4D4F;
  color: white;
  padding: 10px;
  border-radius: 25px;
  margin-top: 0px;
  margin-bottom: 40px;
}

It looks good on iPad and Android, however, when I upload to KDP, the bird looks like a small dot. (Screenshot_3.jpg).

Any idea how to get this to work?

*I have uploaded the bird image as well for testing purposes

Thanks!