Html 边框内的文本

我在angular应用程序中使用了一段html/css代码，我想对其进行修改，以便将文本添加到实体边框中

.colorstripGreen{
填充：0px；
宽度：100%；高度：100%；
左边框：实心；
边框宽度：15px；
边框颜色：#228b22；
}

{{surgAM}}
{{deptAM}

{{surgPM}}
{{deptmp}

以下CSS和html我相信你说的话吗

<div *ngIf="level == '4'">
  <div class="w3-col" style="width: 14%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1%;">
    <div (click)="populateDropDowns(); getChangeLog(); getRequestLog();  myModal.open();">
      <div class="card white">
        <div class="card-content grey-text">
          <div class="colorstripGreen">
            <p><span>1</span>{{surgAM}}<br>{{deptAM}}</p>
          </div>
        </div>
      </div>
      <div class="card white">
        <div class="card-content grey-text">
          <div class="colorstripGreen">
            <p><span>1</span>{{surgPM}}<br>{{deptPM}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.colorstripGreen{
    padding: 0px;
    width: 100%; height: 100%;
    border-left: solid;
    border-width: 15px;
    border-color: #228b22;
}

.colorstripGreen span{position:relative;left:-15px;bottom:-100%}