修改

Question

我有一个包含内容的div，我想使用：before。在其上放置一个元素。

CSS

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

但是我无法将它放在最前面，只能在它的左边。

编辑（更多澄清）

我正在寻找顶部的边框，但不是一直在寻找的边框（100％的div）所以我想添加一个具有定义高度和宽度的伪元素

Answer 1

OP在评论中说：

问题是我想要一个顶部边框，但我不希望边框100％宽度达到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/

Answer 2

我认为您应该将height从2px增加到more，以便将内容放在首位。

div:before {
       content: 'hi';
       display: block;
       width: 30px;
       height: 15px;
       border-top: 1px solid red;
  }

希望这会有所帮助......

Answer 3

div{
  width: 100px;
padding: 20px;
background: lavender;
position: relative;
}    
div:before {
   content: '';
   display: block;
   width: 30px;
   height: 2px;
position: absolute;
left: 0;
background: #000;
top:-2px;
  }

<div>Test content</div>

https://jsfiddle.net/vgnojc56/1/

将div上面的伪元素定位

3 个答案:

修改