文章参考自 Leonus 文章给你的评论添加一个输入提醒吧 | Leonus，文章原文的实现方案是针对于Twikoo评论系统的。本文以此为灵感摸索出针对Waline评论系统的实现方案。

在这里再次感谢 Leonus 的优质教程以及对我实践过程中的疑惑解答！❤❤❤

效果

操作

Twikoo 评论系统实现方案参见 Leonus 的文章：给你的评论添加一个输入提醒吧 | Leonus，如有疑问直接与 Leonus 沟通。

下文将介绍 Waline 评论系统的实现方案。

引入以下 CSS：

/* waline 评论系统关键部分，不然会出现提示框均在同一位置的问题 */

.wl-header {
    overflow: visible;
}
.wl-header-item {
    position: relative;
}

/* end */

.wl-header-item:nth-child(1):before {
    content: '输入QQ号会自动获取昵称和头像🐧';
}

.wl-header-item:nth-child(2):before {
    content: '收到回复将通过的邮箱提醒您📧';
}

.wl-header-item:nth-child(3):before {
    content: '可以通过昵称访问您的网站🔗';
}

.wl-header-item:focus-within::before{
    display: block;
}

/* 主内容区 */
.wl-header-item::before {
    /* 先隐藏起来 */
    display: none;
    /* 绝对定位 */
    position: absolute;
    /* 向上移动60像素 */
    top: -31px;
    /* 文字强制不换行，防止left:50%导致的文字换行 */
    white-space: nowrap;
    /* 圆角 */
    border-radius: 10px;
    /* 距离左边50% */
    left: 50%;
    /* 然后再向左边挪动自身的一半，即可实现居中 */
    transform: translate(-50%);
    /* 填充 */
    padding: 0px 18px;
    background: #669900;
    color: #fff;
}