Assistance with one element of Challenge 2 (HTML/CSS)

#1

So on this webpage https://codepen.io/freeCodeCamp/full/YqLyXB there are elements that seem to be icons like this </>.

I am attempting to put these into my webpage but I found out they have some sort of background that is editable in CSS. I thought it was padding but it doesn’t seem like it. Particularly I am talking about the one in the middle of the line in the middle of the page. ( the one that looks like ----------</>----------)

If I toggle the padding for it the line beneath it appears again as well as toggling the white color for part of the div underneath the symbol? I’m not sure how they managed that. I’m not sure how to get this element in my webpage to look like that, besides taking two divs and placing them next to each other instead with the symbol in the middle. It’d look the same but would be drastically different code-wise.

Any help is appreciated.

#2

Hello @Setarii

If you need that style just type this below code to your css tab and wherever you want this style type hr.star-bright for bright hr.star-dark for dark and type this tag in HTML tab!

Css Code:

hr.star-{
&bright, &dark {
margin: 40px auto 30px;
padding: 0;
max-width: 512px;
border: 0;
border-top: solid 5px;
text-align:center;
header & {
@media(min-width:1023px){
margin-right:0;
text-align:right;
&:after {
right:-10px;
}
}
}
&:after {
content: ‘\f121’;
font-family: FontAwesome;
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-size: 2em;
}
}
&bright {
border-color: #fff;
&:after {
color: #fff;
background-color: #aaa;
}
}
&dark {
border-color: $morkgra;
&:after {
color: $morkgra;
background-color: #eee;
}
}
}

I hope it helps you!:smiley:

#3

Thanks for that, where am I supposed to put hr.star-bright or hr.star-dark in the HTML though? As a normal tag like <hr.star-bright> or something?

Ah nvm I think I got it. I think I’ll stick with my own one I made of two divs and the codes for </> and stuff. Thanks!

#4