在坐在元素顶部之前制作内容（如标签）

Question

无论如何在网站之前制作CSS content就像选项卡一样？

像这样：

这是我到目前为止所做的：

div {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0074D9;
    width: 100px;
    height: 100px;
    display: inline-block;
    font-size: 11px;
    font-family: "Courer New", monospace;
    position: relative;
}

div:before {
    content: "Label";
    top: 0;
    position: absolute;
    background-color: #0074D9;
    color: white;
    padding: 0 2px;
}

http://jsfiddle.net/aEdTz/1/

Answer 1

您可以使用left和top属性来定位元素

div:before {
    content: "Label";
    top: -15px;  /* -height */
    left:-1px;   /* for 1px border on div */
    height: 15px;
    position: absolute;
    background-color: #0074D9;
    color: white;
    padding: 0 2px;
}

http://jsfiddle.net/aEdTz/2/