4.5 KiB
4.5 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78a6367417b2b2512ade | Create a More Complex Shape Using CSS and HTML | 0 | https://scrimba.com/c/cPpz4fr |
Description
::before
and ::after
pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a ::before
pseudo-element is used to add a rectangle to an element with the class heart
:
.heart::before {For the
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
::before
and ::after
pseudo-elements to function properly, they must have a defined content
property. This property is usually used to add things like a photo or text to the selected element. When the ::before
and ::after
pseudo-elements are used to make shapes, the content
property is still required, but it's set to an empty string.
In the above example, the element with the class of heart
has a ::before
pseudo-element that produces a yellow rectangle with height
and width
of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left
and 50px above the top
of the element.
Instructions
heart::after
selector, change the background-color
to pink and the border-radius
to 50%.
Next, target the element with the class heart
(just heart
) and fill in the transform
property. Use the rotate()
function with -45 degrees. (rotate()
works the same way that skewX()
and skewY()
do).
Finally, in the heart::before
selector, set its content
property to an empty string.
Tests
tests:
- text: 'The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
- text: 'The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
- text: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
- text: 'The <code>content</code> of the <code>heart::before</code> selector should be an empty string.'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
Challenge Seed
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: ;
}
.heart::after {
background-color: blue;
content: "";
border-radius: 25%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>
Solution
var code = ".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \"\"; border-radius: 50%;}"