CSS 用after和before做表单

  <!-- 利用after和before制作表单 -->

    <style>
        /* 修改整体内边距 */
        body {
            padding: 50px;
        }

        .biaodan::after {
            /* 空内容显示渐变背景 */
            content: "";
            /* 设置渐变颜色 */
            background: linear-gradient(to right, white, red, green, blue, white);
            /* 定义为块 */
            display: block;
            /* 将高度设置为1px看起来像线条 */
            height: 1px;
        }

        /* 设置指针指向输入框时出现的样式 */
        .biaodan:hover::before {
            /* 内容为定义的data-tips */
            content: attr(data-tips);
            /* 子元素是相对于父元素来定位的 */
            position: absolute;
            /* 提示文本改为居中 */
            text-align: center;
            /* 宽度改为100%与下面线条平行 */
            width: 100%;
            /* 设置文本颜色 */
            color: #333333;
            /* 位置往输入框偏上一点 */
            top: -10px;
            /* 设置文本大小 */
            font-size: 8px;
        }

        .biaodan {
            /* 设置相对位置后指针指向文本框位置不会变化 */
            position: relative;
            margin-bottom: 10px;
        }

        input {
            /* 输入框线条取消 */
            border: none;
            /* 宽度改为100% */
            width: 100%;
            /* 将点击时出现的线条框取消 */
            outline: none;
            /* 文本居中 */
            text-align: center;
        }
    </style>


    <div class="biaodan" data-tips="请输入姓名"><input type="text" /></div>
    <div class="biaodan" data-tips="请输入性别"><input type="text" /></div>
    <div class="biaodan" data-tips="请输入学号"><input type="text" /></div>

成果图：