title: How can i add a text over an div animation?
body: <p>Hey I recently started learning HTML.</p>
  <p>I have a &quot;tank&quot; with some liquid (animation). Now I want would like to add over this liquid animation the value how much it is for example 85%. If I turn the p tag in the liquid div than the text rotate too, but it should not be. How can I solve this problem?</p>
  <p>HTML Part</p>
  <pre><code>            &lt;div id=&quot;gas-station-diesel-tank-background&quot;&gt;
            &lt;div class=&quot;gas-station-diesel-progress&quot;&gt;
              &lt;div class=&quot;gas-station-diesel-progress-inner&quot;&gt;
  
                &lt;div class=&quot;gas-station-diesel-progress-inner-water&quot;&gt;
                  &lt;p id=&quot;gas-station-diesel-tank-progress-text&quot;&gt;85%&lt;/p&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>CSS Part</p>
  <pre><code>
  @keyframes spin {
      from {
          transform: rotate(0deg);
     }
      to {
          transform: rotate(360deg);
     }
  }
  
  .gas-station-diesel-progress {
      position: relative;
      width: 250px;
      height: 250px;
  }
  
  .gas-station-diesel-progress .gas-station-diesel-progress-inner {
      position: absolute;
      overflow: hidden;
      z-index: 2;
      width: 95px;
      height: 190px;
      margin-top: 1px;
      border-radius: 5px;
  }
  
  .gas-station-diesel-progress .gas-station-diesel-progress-inner .gas-station-diesel-progress-inner-water {
      position: absolute;
      z-index: 1;
      background: linear-gradient(-90deg, rgba(130,250,88,1) 0%, rgba(2,163,119,1) 100%);
      width: 300%;
      height: 150%;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      transition: all 1s ease !important;
      -webkit-transition: all 1s ease !important;
      top: 15%;
      left: -50%;
      border-radius: 45% !important;
      animation-duration: 10s;
      animation-name: spin;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      margin-top: -5px;
      margin-left: -37px;
  }
  
  #gas-station-diesel-tank-progress-text {
      font-family: 'Titillium-Bold';
      font-size: 18px;
      color: #fff;
      margin-left: 30px;
      bottom: -10px;
      text-shadow: 0px 0px 10px #000000;
  }
  
  </code></pre>