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
Gist
App.css
GitHub Gist: instantly share code, notes, and snippets.
3 Replies
Chris Bolson
Chris Bolson•2y ago
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)
thehumanist
thehumanist•2y ago
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
Chris Bolson
Chris Bolson•2y ago
🙂 it happens to us all
Want results from more Discord servers?
Add your server