I use the ::after pseudo element on a text span, to style an underline. See here: https://dev.fynndesign.de (it’s below the word “entscheidend”)
However, the styled underline seems to sit even behind the slightly transparent background color of the spacing stack, which has the class .bg for that background.
So with the .underline::after having a z-index of -1 to sit below the text, it’s not working like expected. Hence it only shows a really pale yellow instead of the bright one that’s to be found in the hero image.
A negative value in z-index in going to put it lower than all of the inbuilt z-index values in Foundry. Z-index values are a tricky thing. This means your element that has a negative z-index value is going to be lower than everything else, including your background.
It just has a z-index of -1. And even if I use a much higher negative z-index on the background, or a much higher positive z-index on the text the underline is suppose to sit under, nothing changes.
Because a negative is always going to be under everything. X-indexes are a multi-faceted thing that is much more complex than you think. Additionally containing elements with a z-index set to them then also compartmentalizes all of the other elements within it, and those elements can have an entire set of relative z-index values separate from all of the elements outside of that containing element.
They’re pretty complex.
If you want to provide a simplified version of the problem, with just the items in question, then maybe someone can help out. That said, I don’t believe this to be a Blacksmith or Foundry problem.
Thanks for the reply, Adam. Probably that’s not a Foundry or Blacksmith issue then, but rather how everything behind the scenes is set up. What seems to be a rather simple issue and what works in e.g. Blocs very easily seems to be of a more difficult nature here.
Z-index works the same everywhere. It is a css property and not dependent on the app you’re using. As I said please share your example so we can assist you.
So you have to assign a z-index to the underline class itself. This will compartmentalize the ::after pseudo class so that you can then apply a negative z-index to that ::after component. So give the underline class a z-index of say 2 and that’ll fix your problem.
