Background-color property of the heart::after selector should be pink. content of the heart::before selector should be an empty string

HTML-CSS
1

Applied Visual Design: Create a More Complex Shape Using CSS and HTML


<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36.

Challenge: Create a More Complex Shape Using CSS and HTML

Link to the challenge:

2

Hi,
Check again your selectors!
Remember that after and before pseudo-elements have not only one ’ : '.
I hope it was clear!

3

Hi!
Try again!
we have tow “::” after and before pseudo-elements not one “:”.

4

Hi
In the challenge ask me to make heart i have try to do “::” when i did heart change into star i took screenshot of heart and star.

star
star498×778 858 Bytes

Capture
Capture488×793 2.21 KB

5

what code are you using? if it disappear means you are writing something wrong

6

i’m using code ::before and ::after In the challenge ask me to make heart i have try to do but it saying that The background-color property of the heart::after selector should be pink. and The content of the heart::before selector should be an empty string.

Please Help

7

That’s because the content should be an empty string, not ’ content : ;’.
An empty string (content:"";) is different from nothing (content: ; ).
Hope it helped.

8

HI
If you write( .heart::after) in stead of (.hear:after) and write (heart::before) in stead of (heart:before) I think you will pass this challenge .

9

your above pseudo-element is not right.
this is the right one: .heart ::after