Feel like I'm going crazy... issue with ::before and ::after repositioning an element...
I just wanted a horizontal line above and below the text in my span element in the Header.js... for some reason when I do this it completely repositions the text halfway down the parent container Main.js... I have used these pseudoelements before and never had them reposition the element itself? I dont' know if I am just tired and completely missing something obvious?
Here is the Gist: https://gist.github.com/TheHumanistX/cedf4addae4056a6ec53a6211ae2d0d2
3 Replies
As you have your pseudo elements with inline-block they are literally being place before and after the contents.
The "top" line (::before) is therefore pushing the text down .
You could try either positioning them with display: block or using position: absolute to take them out of the flow (but don't forget to add position: relative to the header)
yeesh. yes... in the past I always used position: absolute... not sure what I was thinking. Thank you so much. Just a little brain dead today lol
🙂
it happens to us all