fix(challenges): update pseudo-element selector syntax from CSS2 to CSS3
Ankit Tiwari
Kristofer Koishigawa
parent
362fc8afc6
commit
15675e8b42
|
|
@ -2622,27 +2622,27 @@
|
|||
"id": "587d78a6367417b2b2512ade",
|
||||
"title": "Create a More Complex Shape Using CSS and HTML",
|
||||
"description": [
|
||||
"One of the most popular shapes in the world is the heart shape, and this challenge creates it with raw CSS. But first, you need to understand the <code>:before</code> and <code>:after</code> selectors. These selectors are used to add something before or after a selected element. In the following example, a <code>:before</code> selector is used to add a rectangle to an element with the class <code>heart</code>:",
|
||||
"<blockquote>.heart:before {<br> content: \"\";<br> background-color: yellow;<br> border-radius: 25%;<br> position: absolute;<br> height: 50px;<br> width: 70px;<br> top: -50px;<br> left: 5px;<br>}</blockquote>",
|
||||
"For the <code>:before</code> and <code>:after</code> selectors to function properly, they must have a defined <code>content</code> property. It usually has content such as a photo or text. When the <code>:before</code> and <code>:after</code> selectors add shapes, the <code>content</code> property is still required, but it's set to an empty string.",
|
||||
"In the above example, the element with the class of <code>heart</code> has a <code>:before</code> selector that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
|
||||
"One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the <code>::before</code> and <code>::after</code> pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a <code>::before</code> pseudo-element is used to add a rectangle to an element with the class <code>heart</code>:",
|
||||
"<blockquote>.heart::before {<br> content: \"\";<br> background-color: yellow;<br> border-radius: 25%;<br> position: absolute;<br> height: 50px;<br> width: 70px;<br> top: -50px;<br> left: 5px;<br>}</blockquote>",
|
||||
"For the <code>::before</code> and <code>::after</code> pseudo-elements to function properly, they must have a defined <code>content</code> property. This property is usually used to add things like a photo or text to the selected element. When the <code>::before</code> and <code>::after</code> pseudo-elements are used to make shapes, the <code>content</code> property is still required, but it's set to an empty string.",
|
||||
"In the above example, the element with the class of <code>heart</code> has a <code>::before</code> pseudo-element that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
|
||||
"<hr>",
|
||||
"Transform the element on the screen to a heart. In the <code>heart:after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.",
|
||||
"Transform the element on the screen to a heart. In the <code>heart::after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.",
|
||||
"Next, target the element with the class <code>heart</code> (just <code>heart</code>) and fill in the <code>transform</code> property. Use the <code>rotate()</code> function with -45 degrees. (<code>rotate()</code> works the same way that <code>skewX()</code> and <code>skewY()</code> do).",
|
||||
"Finally, in the <code>heart:before</code> selector, set its <code>content</code> property to an empty string."
|
||||
"Finally, in the <code>heart::before</code> selector, set its <code>content</code> property to an empty string."
|
||||
],
|
||||
"tests": [
|
||||
{
|
||||
"text":
|
||||
"The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.",
|
||||
"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.');"
|
||||
"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%.",
|
||||
"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%.');"
|
||||
"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":
|
||||
|
|
@ -2652,9 +2652,9 @@
|
|||
},
|
||||
{
|
||||
"text":
|
||||
"The <code>content</code> of the <code>heart:before</code> selector should be an empty string.",
|
||||
"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.');"
|
||||
"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.');"
|
||||
}
|
||||
],
|
||||
"solutions": [],
|
||||
|
|
@ -2681,7 +2681,7 @@
|
|||
" width: 50px;",
|
||||
" transform: ;",
|
||||
"}",
|
||||
".heart:after {",
|
||||
".heart::after {",
|
||||
" background-color: blue;",
|
||||
" content: \"\";",
|
||||
" border-radius: 25%;",
|
||||
|
|
@ -2691,7 +2691,7 @@
|
|||
" top: 0px;",
|
||||
" left: 25px;",
|
||||
"}",
|
||||
".heart:before {",
|
||||
".heart::before {",
|
||||
" content: ;",
|
||||
" background-color: pink;",
|
||||
" border-radius: 50%;",
|
||||
|
|
|
|||
Loading…
Reference in New Issue