Angular 角2元素下划线

我无法格式化我的列表，这是一个有角度的6/7树。我想让下划线显示在列表元素的图标和文本下。我也很难将列表元素的高度和填充设置为合适的大小，其中的材质垂直居中

构建树的html如下所示：

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
      <input type="checkbox">
      <button mat-icon-button disabled>
          <h2 class="underline"><a><div class="tree-icon"><mat-icon>{{node.iconname}}</mat-icon></div><div class="tree-text">{{node.name}}</div></a></h2>
      </button>
    </li>
  </mat-tree-node>

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <input type="checkbox">
        <button mat-icon-button matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.name">
          <h2 class="underline"><a><div class="tree-icon"><mat-icon>{{node.iconname}}</mat-icon></div><div class="tree-text">{{node.name}}</div></a></h2>
        </button>
      </div>
      <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

---

这里缺少什么，在我的SCS甚至打字脚本中？

我找到了它。它需要像这样重写一下：

这些：

<h2 class="underline"><a><div class="tree-icon"><mat-icon>{{node.iconname}}</mat-icon></div><div class="tree-text">{{node.name}}</div></a></h2>

---

寻求调试帮助的问题必须包含在问题本身中重现问题所需的最短代码。我添加了更多的代码，但是如果您想要一个好的示例，请转到stackblitz链接。

<h2 class="underline"><a><div class="tree-icon"><mat-icon>{{node.iconname}}</mat-icon></div><div class="tree-text">{{node.name}}</div></a></h2>

<h2 class="underline"><a><mat-icon style="margin-top: 5px;">{{node.iconname}}</mat-icon><span style="margin-top: -8px;">{{node.name}}</span></a></h2>

*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}