So while doing the portfolio project, I’m trying to use the hr::after property to put a Font Awesome symbol in the center of the < hr > much like sample. I have two < hr > so far within the scope, the first one aligns correctly, the second does not. Here’s how it looks:
< body >
< main >
< hr />
< hr />
< /main >
< /body >
the CSS for both of them are applied by a single:
main hr::after {
}
You can view the codepen here:https://codepen.io/Ayelwen/pen/KXwMZx
so far, I’m tinkering and playing with the position, display, and other properties to see what could be causing it.
I’ve been experimenting and researching for a day on this now so figured it was about time to ask. Thanks in advance for any advice.