html - 将伪元素定位在 div 之上

Question

我有一个包含内容的 div，我想使用 :before 将一个元素放在它上面。

CSS

 div:before {
       content: '';
       display: block;
       width: 30px;
       height: 2px;
  }

但是我不能把它放在上面，只能放在它的左边。

编辑(更多说明)

我正在寻找顶部的边框，但不是一直延伸的边框(div 的 100%)所以我想添加一个具有已定义高度和宽度的伪元素

Answer 1

OP 在评论中说:

the problem is i want a top-border but I don't want the border to go 100% the width of the div

这解决了 box-sizing 属性，没有 :before 伪类:

div {
    border-top: 10px;
    box-sizing: border-box;
}

看到它运行:https://jsfiddle.net/8hs5n7sd/

编辑

评论后，你可以这样:

div {
    position:relative;
    top: 20px;
    width:100%;
    height:200px;
    background-color:black;
    box-sizing:border-box;
}
div:before {
    content :" ";
    position :absolute;
    top: -5px;
    height: 5px;
    background-color:red;
    width: 90%;
    left: 5%;
}

看到它运行:https://jsfiddle.net/8hs5n7sd/1/