CSS triangle :before element

Question

I'm using bootstrap, trying to make a div have a CSS triangle before it.

http://jsfiddle.net/B2XvZ/11/

Here is my non-working code:

.d:before {   width: 0px;   height: 0px;   border-style: solid;   border-width: 10px 15px 10px 0;   border-color: transparent #dd4397 transparent transparent;   } 

The way I'd like it to look is for there to be a pink left-pointing triangle right before the text "this", with no gap between it and the div. I've tried to do this by floating the elements also, with no success.

Answer 1

You need to specify the content property.

For positioning, add position:relative to the parent, and then absolutely position the arrow -15px to the left.

jsFiddle example

.d {     position:relative; }  .d:before {     content:"\A";     border-style: solid;     border-width: 10px 15px 10px 0;     border-color: transparent #dd4397 transparent transparent;     position: absolute;     left: -15px; } 

Answer 2

You need content property and some other

.d:before {   content: '';   width: 0px;   height: 0px;   border-style: solid;   border-width: 10px 15px 10px 0;   border-color: transparent #dd4397 transparent transparent;     display: inline-block;   vertical-align: middle;   margin-right: 5px; }