CSS 实现带图标和下划线的 3 行标题

<div>
  <ul>
    <li><span class='icon'></span>标题1</li>
    <li><span class='icon'></span>标题2</li>
    <li><span class='icon'></span>标题3</li>
  </ul>
</div>
<style>
  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('icon.png') no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 10px;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    display: inline-block;
    margin-right: 30px;
    position: relative;
  }
  
  li:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    bottom: -5px;
    left: 0;
  }
  
  li:last-child {
    margin-right: 0;
  }
</style>