边界内的文本

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