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

HTML-CSS
1

Hi folks,
In the starting code of this lesson the .heart::after selector makes a blue box, but that depends on the ‘position: absolute’. When you comment it, then the box doesn’t show up anymore. Looks like the width and height are not taken into account anymore when the absolut positioning isn’t there. I’m trying to understand the logic behind that. Somebody able to explain?

.heart::after {
    background-color: blue;
    content: "";
    border-radius: 25%;
    //position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }

Thx

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3