Before going on, you should take everything inside the style tag and put it in the css tab on codepen. Same if you have any scripts. It’ll be a little easier to work with. There are a couple other “codepen niggles” too (no need for a body tag in the html tab. google fonts can go into the head textarea in settings), but they won’t stop your code from working. You can look at those later.
I made a quick image to show you how you might restructure your code. You aren’t required to, but it’s preferred. Definitely add that FA library and keep going.
Hi Dave,
Do you know why if I remove display: inline-block; the hr element and the pseudo element don’t get damaged? I am trying to understand what’s the added value of using display: inline-block; in this case.
You might be right here. We usually add display: inline-block when we need styles that aren’t meant for inline tags (span, strong, i, a, and others).
If you try to set a width to something like a span or i, the style won’t work because these tags aren’t supposed to have width and height. That should be decided by their parent tag and their use (they’re usually in the middle of a paragraph). Adding inline-block lets them stay in the middle of the paragraph (or wherever they are) while still being able to set width and height.