Question

Source : http://twitter.github.com/bootstrap/components.html#navbar

To make the little black triangle for the drop down menus, Twitter is using the following CSS:

.caret 
{
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 4px solid black;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    opacity: 0.3;
    filter: alpha(opacity=30);
}

I tried using <b class="caret"></b> but the color is gray. If you are on a Twitter Bootstrap page and remove the content: “” the triangle will be gray as well. If I add the code in HTML style tag

<b style="-the code-"></b> is black as it should be. Why is this happening ?

Update:

The code is the same but when it is in a CSS file the opacity: 0.3 is the one that makes the triangle gray, but still why this is not happening in the HTML style tag?

Answer 1

It doesn’t turn grey because you’re including

content: "";

into

<b style="-the code-"></b>

and the double quotes are interfering. To fix it do

<b style="... content: ''; ..."></b>

That will work – DEMO