做一个模态框中的关闭按钮

这是模态框的头部，包含标题和关闭按钮，这里只写html和css，js就不写了

<div class="dialog-header">
    <h4>标题</h4>
    <span class="close-icon">×</span>
</div>
.dialog-header {
      display: flex;
      align-items: center;
    }

    .dialog-header h4{
      margin-right: auto;
      font-weight:bold;
    }

    .dialog-header .close-icon {  
      vertical-align: middle;
      font-size: 30px;
      transform: translate(0, -5%);
      cursor: pointer;
      color: #000;
      opacity: 0.5;
      text-shadow: 0 1px 0 #fff; 
    }

    .dialog-header .close-icon:hover {  
      font-size: 36px; /* 字体变大 */  
      font-weight: bold;
      text-shadow: 1px 1px 2px #000000; /* 设置阴影 */  
    }