If you really need it inline, for example because you are loading some user-defined colors dynamically, you can always add a <style>
element right before your content.
<style>#project-slide-1:before { color: #ff0000; }</style>
<div id="project-slide-1" class="project-slide"> ... </div>
Example use case with PHP and some (wordpress inspired) dummy functions:
<style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style>
<div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>
Since HTML 5.2 it is valid to place style elements inside the body, although it is still recommend to place style elements in the head.
Reference: https://www.w3.org/TR/html52/document-metadata.html#the-style-element