I'm following some tutorials to do some coding, and I've found that for some reason, when i use the ::before pseudo attribute, and try to set the background color of it, nothing is visible.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1d061a;
font-family: consolas;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px 0;
}
.container .box {
position: relative;
width: 320px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin: 40px 30px;
transition: 0.5s;
}
.container .box::before {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 50%;
height: 100%
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
}
(I couldn't figure out how to get the code to display correctly)
CodePudding user response:
You've got some error in your ::before
missing a ;
after height declaration.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1d061a;
font-family: consolas;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px 0;
}
.container .box {
position: relative;
width: 320px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin: 40px 30px;
transition: 0.5s;
background: #f00;
}
.container .box::before {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 50%;
height: 100%;
display: block;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
}
<div >
<div ></div>
</div>
CodePudding user response:
Little syntax error; all that was missing was a " ; " after your height
declaration in the ::before
selector, causing your background-color
to not be picked up.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1d061a;
font-family: consolas;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px 0;
}
.container .box {
position: relative;
width: 320px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin: 40px 30px;
transition: 0.5s;
}
.container .box::before {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 50%;
height: 100%;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
}
<div >
<div ></div>
</div>