Empty String in "content"

Empty String in "content"
0
#1

Hello everyone! :handshake:
Sorry for my poor English… It is my 1st topic… I decided to ask questions… I think “stupid” questions but it will be better to ask than stay calm and don’t understand some things… :zipper_mouth_face: … So from today I will ask , I will open my mouth (I will try to do it not very often… but I WILL) Thank you!!! :slight_smile:

My question is: Why “putting” an empty string into “content”:

.heart::before {
content: “”;

MAKES A HEART ? WHY SHOULD WE USE AN EMPTY STRING IN “CONTENT”?

Thank you for reading me! And I hope you will help! :pray:

Your code so far


<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/74.0.3729.157 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html

#2

If you don’t add content the pseudo-element will not appear, but if you write that content is "" you are adding a content without writing anything. All the other code make the heart, that one just make sure it appears

Try resetting the code, setting the content as first thing, and then follow again instructions to see things change

1 Like
#3

The content property is left empty by choice and no special reason. The content property can contain text, images and also you can add icons too if you know their UNICODE value.

So in this case, they are creating a heart shape and they aren’t adding text to the heart shape so they left content value empty, but try adding some random text and emojis too, if you want, lol and see what you get. It’s actually a fun property.

Hope this helped

1 Like
#4

@ritambah , @ieahleen ! I appreciate your help! Thank you! :clap::clap::clap::clap: