如何使用伪元素：之前和之后：之后创建端盖

Question

我正在尝试使用Pseudo-Element：before和：after在div元素的末尾添加一个端盖外观。

我尝试了一些事情，但由于某些原因我没有得到它。

使用下面的CSS，我试图添加一个框，或者只是为了让我有一个起点可以使用，但即使是下面的CSS也不会出现。

.horDim {position:absolute;left:5px;right:5px;top:10%;height:15px;border-top:1px dotted black;}
.horDimTxt {position:absolute;left:25%;bottom:0;}

.horDim:before {

    position:absolute;left:10px;top:10px;

    width:25px;

    height:25px;

    background-color:red;
}

我用来在垂直条之间创建直线的div就是这样。

<div class="horDim"><span class="horDimTxt">10 1/2</span></div>

以下是现在看起来的快照，以及快照下图中的示例，其中显示了端盖需要的样子。

有关如何执行此操作的任何建议吗？

Answer 1

您缺少psudo元素的content: ''属性。它显示时需要此属性。

.horDim:before {
    content: ''
    position:absolute;left:10px;top:10px;
    width:25px;
    height:25px;
    background-color:red;
}

原因在W3C spec for the content attribute：

中找到

  

初始：正常（无）

     

none：不生成伪元素。

this answer

中的更多信息