Строго говоря, для передачи в attr() цвета (и в целом значения, отличного от content) нужно явно указывать тип - см. MDN:
/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);
В частности, там есть тип color.
Увы, возможность передавать в attr() что-то отличное от content до сих пор не поддерживается ни одним браузером - см. Can I Use.

Так что даже без JS такой вариант установки цвета работать не будет:
#content:after {
content: '';
display: block;
height: 30px;
width: 30px;
/* background-color: #FF0000; */
background-color: attr(data-color color);
}
<div id="content" data-color="#FF0000"></div>
Напрямую манипулировать псевдоэлементами из JS невозможно, так, видимо, остаётся только вариант заранее объявить классы с необходимыми цветами (и переключать их через JS):
.content:after {
content: '';
display: block;
height: 30px;
width: 30px;
background-color: #000;
}
.content_red:after {
background-color: #F00;
}
.content_blue:after {
background-color: #00F;
}
<div class="content content_red"></div>