Hr::after positioning

Code Feedback
1

Hello, I’m a new member of the freeCodeCamp and I’m currently coding the second project of the Basic Front End Development: Build a Personal Portfolio Webpage.

I’m having a little problem how to position the hr::after.

Here’s my CodePen for you guys to check out: https://codepen.io/vmoliveira91/pen/WzowqQ

The hr from my About section is working as expected.

image
image755×224 11 KB

And I have to use hr again in my Portfolio section. I used the same configuration but doesn’t work the same.

image
image1079×164 2.68 KB

Why is this happening? Is there other way to do this?

Thanks.

2

For future reference, post your questions in the help category.

As for the hr thing, it might be better to just reuse your same code instead of making an entirely separate class.


hr {
    width: 70%;
    border: none;
    overflow: visible;
    border: none;
    height: 1px;
    background: #333;
    color: #333;
    text-align: center;
}

hr::after {
  content: '\f121';
  font-family: FontAwesome;
  display: inline-block;
  position: relative;
  top: -0.5em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: #aaa;
}

Then if you need to change it for each one, just add the classes to it.

hr.portfolio::after {
  content: 'somethingelse';
  background: #ccc;
}

As for why the sizing is different, that has something to do with the way ems work. When you set your font size to 1.5em the browser goes and finds the font size of its parent element, and the font size is then based off of that. If the parent elment doesnt have a set font size then it uses the font-size of the browser. In your code you have…

.portfolio {
    font-size: 30px;
}

The .about element doesnt have a set font size so the browser inherits its default font size for whatever element your using and the em is based off of that.

Example. Your about hr font size is set to 1.5em. If we move up your element hieracy we dont see any other font size being set. Because of this, the browser default user font size. In my case using chrome its 16px.

Now lets move to your parent hr. Same font size at 1.5em. But upon moving up the hierachy we immediately see that your portfolio element does have a font-size attribute set.

.portfolio {
    font-size: 30px;
}

So instead of using the browser default were gonna use this instead. This is why there is a gigantic difference in font size despite using the same 1.5em multiplier for both hr tags.

I think I covered everything but if theres something I missed just let me know.

2 Likes
3

I’m not used to the em unit. But you clarified it for me.
It’s working as I expected now. Thank you!!!

1 Like