使用css使文本显示在边框上方

Question

我想知道是否有办法将Success文本放在顶部的红色边框上方？

我正在使用它与纯css，但似乎无法让它工作

form:before {
    content: "SUCCESS";
    color:red;
    position:absolute;
    margin-bottom:20px;
}

感谢您的帮助！

这是一个小提琴：

＆＃13;

＆＃13;

.success {
    outline:2px solid green;
}
.success:before {
    content:"SUCCESS";
    color:green;
    top:-20px;
    position:absolute;
}    

＆＃13;

<div class="success">Hello</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

form:before {
        content: "SUCCESS";
        color:red;
        position:absolute;
        top:-20px;
        left:0px;

    }

Answer 2

我已经在JSFiddle上更新了你的代码并在这里提供了它，希望能给你一个粗略的想法：https://jsfiddle.net/esLcd54a/24/

*,
*:before,
*:after
{
    margin: 0;
    padding: 0;
}
.padding
{
    margin-top: 50px;
}
.success
{
    outline: 1px solid green;
    position: relative;
    display: inline-block;
}
.success:before
{
    content:"SUCCESS";
    color:green;
    position:absolute;
    top:-30px;
    left: 0;
    border: solid 1px;
}

<div class="padding"></div>
<div class="success">Hello</div>