How to style ion-button -> button:before element in Ionic4


I am migrating an Ionic3 app to Ionic4 and I am having a hard time translating some of the CSS rules there.

For example, in Ionic3 I could style the :before or :after or an <button ion-button> element with button[ion-button]:before.

Now the <button> element is inside the Shadow DOM of <ion-button> and I am not able to put an :before inside the <button>. Is this possible with Ionic4 ?


Without hack I would say no. There are different tutorials available on the net, notably those from Josh Morony about what you could and what you could not style in case of shadow Dom. I also wrote one article about this particular topic

That being you could still build a hack and inject styles using javascript or better, build your own component for your button if they need to be heavy styled


I see! I think I will follow your advice and make my own component.

1 Like

Good call, when I migrated I tried for hours to style the ion-button, like a crazy thing full round radius 50% with gradient two level of z-index and stuffs, after a while I just created my own component and it hits me “damned I should have done that earlier, that’s way to much customization, make no sense these are way to different” :wink:

have fun