::after only works on 'content', why?

Question

css

I tried to test one thing, after two float blocks, set :after with clear:both, but for some reason nothing happens if I add content: "text"; then everything works right away. Why is this happening?

<main class="clear">
    <div class="first"></div>
    <div class="second"></div>
  </main>
  <div class="three"></div>

.first,.second,.three{
    background-color: red;
    display: block;
    width: 50px;
    height: 50px;
    margin: 20px;
  }
  .first{
    float: left;
  }
  .second{
    float: right;
  }
  .three{
    background-color: blue;
  }
  .clear{
    width: 200px;
  }
  main:after{
    clear: both;
  }

Answer 1

:before and :after are only used in conjunction with content. To create an empty pseudo element add content: " "orcontent: "\00a0"

Answer 2

css standard