HTML5向左滑動刪除是一種常見的用戶界面效果，它可以讓用戶通過向左滑動來刪除某些列表項或者消息。

/* HTML5 向左滑動刪除樣式 */
.swipe-delete {
position: relative;
overflow-x: hidden;
background-color: #fff;
margin: 10px;
}
.swipe-delete .swipe-content {
position: relative;
left: 0;
overflow-x: hidden;
transition: all 0.3s ease-in-out;
width: 100%;
height: 100%;
}
.swipe-delete .swipe-actions {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
width: 0;
transition: all 0.3s ease-in-out;
}
.swipe-delete .swipe-delete-action {
background-color: #dd2c00;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
border-radius: 0;
}
.swipe-delete:hover .swipe-content {
left: -50px;
}
.swipe-delete:hover .swipe-actions {
width: 50px;
}

這段CSS代碼可以讓我們創建一個名為“swipe-delete”的CSS類，它包含一個名為“swipe-content”的元素和一個名為“swipe-actions”的元素。當我們將鼠標懸停在“swipe-delete”元素上時，“swipe-content”元素會向左移動，并顯示出“swipe-actions”元素。

其中，“swipe-actions”元素中可以包含任何需要的按鈕或者其他操作元素，比如刪除按鈕、標記為已讀等等。

當用戶點擊“swipe-delete”元素上的某個操作按鈕時，可以使用JavaScript中的event.target來確定用戶點擊的是哪個按鈕，然后執行相應的操作代碼即可。