我该怎么做：使用HTML / CSS在矩形内的文本？

Question

您好，我想在HTML / CSS中执行此操作，您可以帮助我吗？

我试着这样做：

这是我的css代码：

    .line-lg{
   width:120%; 
   text-align: center; 
   border-bottom: 2px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
}

.line-lg span{
  background:#4e5d6c; 
    padding:0 10px; 
}

.rectangle{
padding-top: 40px;
  width:100px;
  height:100px;
  border:1px solid #000; 
  position: relative;
  text-align: center;
}

这是我的HTML代码：

<table class="table">
   <tr>
      <td>
         <div class="rectangle">
            <h4 class="line-lg"><span>Lol</span></h4>
         </div>
      </td>
      <td>
         <div class="rectangle">
            <h4 class="line"><span>Lol</span></h4>
         </div>
      </td>
      <td>
         <div class="rectangle"></div>
         <h4 class="line"><span>Lol</span></h4>
         </div>
      </td>
   </tr>
</table>

我的结果是：

正如你所看到的那条线没有填满所有的空间而且我不知道如何做到这一点我试图做一些其他的事情没有成功，所以我不知道该怎么做。我是HTML / CSS的新手，所以如果你能给我一些建议，我真的很感激