CODEWITHSUNDEEP
htmlcss
RS92
RS92

Reputation: 485

Why I can't change color on before pseudo element

I created div element with mini caret, now div looks like tooltip, I have problem with changing color of caret on second div, I change background color but I want to change only of mini caret.

In CSS is what I tried to solve this problem.

Reference, in secong tooltip, class walter1 is imported, because, I don't want to copy all codes from walter1 to walter2.

JSFIDDLE: http://jsfiddle.net/hfgxzsnv/

Upvotes: 3

Views: 990

Answers (3)

glend
glend

Reputation: 1622

Took some time to tidy the code a bit, other than that its the same thing the others did. you just change the border colour;

.walter2:before {    
  border-left-color: #dddddd;      
}

JsFiddle

Upvotes: 1

laaposto
laaposto

Reputation: 12213

The caret gets its color from the border not the background. You have to override this rule border-left: 13px solid #b2d4dd; from .walter1:before

You have to change border-color not background-color

Use 

.walter2:before {    
  border-left-color: #dddddd;      
}

DEMO

Upvotes: 3

enigma
enigma

Reputation: 3491

.walter2:before {
  border-left-color: #dddddd;
}

JSFiddle

Upvotes: 1

Related Questions