边框内的文字

Question

我在我的角应用程序中使用了一段html / css代码，我想重做，所以我可以在我的实边框中添加文字。

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

<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>{{surgAM}}<br>{{deptAM}}</p>
          </div>
        </div>
      </div>
      <div class="card white">
        <div class="card-content grey-text">
          <div class="colorstripGreen">
            <p>{{surgPM}}<br>{{deptPM}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在我的应用程序中，显示如下：

我希望能够做的是编辑css和html以在绿色框内包含一个数字。我怎样才能做到这一点？

由于

Answer 1

以下CSS和HTML我相信你所说的https://jsfiddle.net/h3aenLkh/

<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>

和css

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

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