Flexbox 容器内的内容不显示内联链接

Answer 1

不要在这里使用

display:flex

，因为它会将其容器内的所有元素视为“块”。

.my-alert {
    width: 500px; 
    padding: 10px;
    border: 5px solid;
    font-weight: bold;
    /*display: flex; */
    padding-left:40px;
    justify-content: start;
    align-items: center;
    font-weight: 900 !important;
    float:left;
    position: relative;
    &:before {
        font-family: 'Font Awesome 5 Free';
        font-size: 40px;
        display: flex;
        align-items: center;
        padding-right: 20px;
        font-weight: 900 !important;
      position:absolute; 
      left:8px; 
      top:50%;
      transform:translateY(-50%);
    }
}

.my-alert-success {
    color: green;
    border-color: green;
    &:before {
        content: '\f058';
    }
}

Answer 2

只需为

display:contents

 标签添加 

<a>

 即可。

.my-alert {
    display: flex;
}
.my-alert a {
    display: contents;
}

..弹性容器的子级被迫具有块风味 显示类型。