Newbie – textual content is appearing 2 occasions

Good day

I am hoping it is alright to put up questions right here, if no longer sorry.

​

I am attempting to make use of ::sooner than and ::after to have the the colour of the textual content converting relying at the background, it is virtually running apart from my dislayed textual content is proven 2 occasions.

i’m seeking to reflect this styling from a StackOverFlow resolution:

[https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color](https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color)

I feel i do know why and perhaps how one can repair it, however i am not that robust in CSS, i have most commonly desirous about backend stuff.

​

**My code: (it is blended with som jinja syntax for backend stuff)**

HTML: [https://pastebin.com/T90EEuFz](https://pastebin.com/T90EEuFz)

CSS : [https://pastebin.com/SY9VS8Jv](https://pastebin.com/SY9VS8Jv)

​

I feel perhaps i want a strategy to calculate when the background is what colour, then show the textual content with the corresponding colour.

​

* I did ::sooner than ::after styling at the background may just that mess with the textual content styling ?
* Am i proper if i believe i will use calc() kinda like a if observation to get it proper, or is there at smarter approach ?

​

**Photographs of web page:**

[all styling in place](https://preview.redd.it/86s9sf4rd13a1.png?width=930&format=png&auto=webp&s=d765201294868375dc58b04e98135f0776b41c1c)

If i take away the ::after styling it seems to be great with white textual content colour to the background:

[Without the ::after styling](https://preview.redd.it/lvq56n5hd13a1.png?width=857&format=png&auto=webp&s=db7f0e88a86202f48ab90913bae09c9fcfb9a28f)

View Reddit by way of Kratos_89 – View Supply