CODEWITHSUNDEEP
htmlcss
trigger
trigger

Reputation: 497

How to set css properties for "after" and "before" DOM psuedo elements

I need to change the color of "border-left" from red by default to color in scope (blue for example).

.hello:before {
  content:' ';
    display:inline-block;
    width: 22px;
    height: 25px;
    position:absolute;
    border-left:3px solid red;
}
.hello:after {
    content:' ';
    display:inline-block;
    width: 20px;
    height: 30px;
    position:absolute; 
    border-left:3px solid red;

}
<div class="hello"></div>

Upvotes: 0

Views: 106

Answers (1)

DrCord
DrCord

Reputation: 3955

example for single color

.hello.blue:before {
    border-color: blue;
}
.hello.blue:after { 
    border-color: blue;    
}

<div class="hello {{color}}"></div>

example for any hexadecimal color code

use a embedded style, which may only work if you can put this in the of your doc...

<style>
.hello:before {
    border-color: #{{color}};
}
.hello:after { 
    border-color: {{color}};    
}
</style>

and then set the $scope.color in the controller

Upvotes: 1

Related Questions