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?

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Filling The Stack is What I DO
  • 6,553
  • 14
  • 54
  • 86

1 Answers1

2

You are missing the content: '' attribute on your psudo-elements. This attribute is required for it do display.

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

The reason is found in the W3C spec for the content attribute:

Initial: normal (none)

none: The pseudo-element is not generated.

More info in this answer

Community
  • 1
  • 1
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • Yep, that's it. got any idea how to do the angles? – Filling The Stack is What I DO Jun 27 '13 at 19:26
  • @AlumCloud.Com You can use css border hacks to generate borders. I've been really meaning to redo this example, but I have one that uses html elements to create border hacks here: http://jsfiddle.net/W6uak NOTE: I do not condone or endors the use of non-semantic HTML to do this. Use pseudo-elements if possible. :P – Joseph Marikle Jun 27 '13 at 19:29