html - 使用按钮组创建更新按钮和取消按钮，然后在两个按钮之间添加(|)

Question

我想在用户 View 中将两个按钮显示为更新按钮和取消按钮，就像一个按钮一样。然后，我想在两个按钮之间添加 (|)。我添加了 <span>标签显示 |两个按钮之间。然后，我为更新和删除创建了两个按钮。我尝试了很多时间但我做不到。我该怎么做？请帮助我。

.footer-button1{
		   background-color: #85b59d;
           width: 60px;
           margin-top: 10px;
           display: inline-block;
           text-align: center;
           height: 30px;
           border-radius: 5px;
           border: none;
           margin-bottom: 10px;
	     }

<div class="btn-group">
					    <button type="button" class="btn footer-button1">Update</button>
					    <button type="button" class="btn footer-button1"> <span style="margin-left: -10px;">|</span> Delete</button>
                    </div>

Answer 1

为此我使用了 :after 伪代码。如果您特别想要一个“|”您可以使用 content 而不是边框​​。

.footer-button1{
		   background-color: #85b59d;
           width: 60px;
           margin-top: 10px;
           display: inline-block;
           text-align: center;
           height: 30px;
           border-radius: 5px;
           border: none;
           margin-bottom: 10px;
           position: relative;
           margin-right: 13px;
	     }
 
 .footer-button1:first-child:after {
  display: none;
 }
 
.footer-button1:after {
  width: 1px;
  height: 28px;
  position: absolute;
  content: '';
  top: 0;
  left: -10px;
  border-left: 1px solid #000;
}

<div class="btn-group">
					    <button type="button" class="btn footer-button1">Update</button>
					    <button type="button" class="btn footer-button1">Delete</button>
                    </div>