Having trouble bug-testing an exercise. Issue with "content" and making an empty string

HTML-CSS
1

Hello, can someone please help me troubleshoot one exercise? I am on Applied Visual Design: Create a More Complex Shape Using CSS and HTML (The .heart::before/after one)

I am using Chrome on a Mac. The only error I keep getting is // running tests

The content of the heart::before selector should be an empty string.

// tests completed. Empty string = "content: " "; right?
But it’s not working. Code below:

.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 {

background-color: pink;

content: ’ ';

border-radius: 50%;

position: absolute;

width: 50px;

height: 50px;

top: -25px;

left: 0px;

}

</style>

<div class = “heart”></div>

2

Hey,
So the reason is because it should be .heart::before {
content:"" ;

Space is a like a character in this instance.

1 Like
4

Nevermind, I just got it after some fumbling. thanks!