How to change category-name CSS attributes after scroll?

[orchardstreet]

.category-name:before{
/*stuff here*/
}

seems to work for the category name before the scroll

but

.category-name:after{
/*stuff here*/
}

Does not work for after the scroll. Cannot change color etc

Any advice on changing the CSS properties of the category name after the scroll?
Also CSS for how to change the bullet color before it would be awesome too because I cannot figure that out either.

[Dax (Daniela)]

It works for me

.category-name:before{
  content: "««« ";
  color: blue;
}
.category-name:after{
  content: " »»»";
  color: red;
}

after scroll =>