How to hide CSS grid-area name display

I am developing a simple UI using CSS grid layout and HTML. I have many grid rows and columns

This is how I have coded the CSS and HTML as follows

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>WP Desktop</title>
<style>


html, body, .grid-container { height: 98%; margin: 2; }

.grid-container * { 
 border: 2px solid blue;
 position: relative;
}

.grid-container *:after { 
 content:attr(class);
 position: absolute;
 top: 0;
 left: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1.8fr 0.2fr 1fr;
  grid-template-areas: "プロジェクトビュー Design-Area Design-Area Design-Area Outline" "プロジェクトビュー Design Source Others Outline" "プロジェクトビュー Terminal Terminal Terminal Properties";
}

.プロジェクトビュー { grid-area: プロジェクトビュー; }

.Design-Area { grid-area: Design-Area; }

.Design { grid-area: ""; }

.Source { grid-area: ""; }

.Others { grid-area: ""; }

.Terminal { grid-area: Terminal; }

.Outline { grid-area: Outline; }

.Properties { grid-area: Properties; }


</style>

  </head>
  <body>
    <div class="grid-container">
      <div class="プロジェクトビュー"></div>
      <div class="Design-Area"></div>
      <div class="Design" ><button id="btndesign" > Design  </button></div>
      <div class="Source"><button id="btnsource"> Source  </button></div>
      <div class="Others"><button id="btnothers"> Others  </button></div>
      <div class="Terminal"></div>
      <div class="Outline"></div>
      <div class="Properties"></div>
    </div>
  </body>
</html>

I have not given any text in DIv class. But the grid are displays test Design-Area

How to hide this text.

PS: I am new to CSS and HTML

Note: Updated with complete code snippet

Solution

.grid-container *:after { 
 content:attr(class);
 position: absolute;
 top: 0;
 left: 0;
}

Remove the content:attr(class); property from the above class. You're now adding a content to the grid area that prints your classname.