0

I'm attempting to use the Pseudo-Element :before and :after to add a end cap look to the ends of div elements.

I've tried a few things but I'm not getting it for some reason.

With the CSS below I've attempted to add a box, or just anything to show up to get me a starting place to work with, but even the CSS below does not show up.

.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;
}

The div that I'm using to create the line between the vertical bars looks like so.

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

Here is a snapshot of what it looks like now and in the snapshot lower image in an example of what the end caps need to look like.

Snapshot

Any suggestions on how to do this?

4

1 回答 1

2

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

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

原因可在W3C 规范中找到 content 属性：

初始：正常（无）

none：不生成伪元素。

此答案中的更多信息

于 2013-06-27T19:23:37.237 回答