Angular 2 元素下划线答案

【问题标题】：Angular 2 element underlineAngular 2 元素下划线
【发布时间】：2019-06-08 13:32:48
【问题描述】：

我在格式化我的列表时遇到问题，这是一个 Angular 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>

这里是scss：

.example-tree-invisible {
  display: none;
}

.example-tree li,
.example-tree ul {
  padding-left: 10px;
  list-style-type: none;
}

.underline {background: #ff5e33;}

h2.underline > a {
  text-decoration: none;
  color: #000;
  z-index: 1;
}

h2.underline > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #9CF5A6;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

h2.underline > a:hover:before,
h2.underline > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}

.underline a:before {
  background: rgba(255, 0, 0, 1.0);
  box-shadow: 0 0 10px 2px #5900ff;  
}

.tree-icon {
  margin-top: 8px;
  float: left;
}

.tree-text {
  float: left;
  padding-left: 10px;
}

.mat-icon {
  margin-top: -8px;
}

.tree-text {
  white-space: nowrap;
}

https://angular-pjezzg.stackblitz.io

这里缺少什么，在我的 scss 甚至 Typescript 中？

【问题讨论】：

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

标签： angular sass css-animations

【解决方案1】：

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

这些：

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

scss 需要添加这些行：

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

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

【讨论】：