Placing cursor after and/or before generated CSS content in Atom


I’d like to change CSS style of some keywords and operators in Atom so that there is additional content displayed after or before them (using ::after or ::before). For example, I’d like to add : before = in PHP code to denote assingment (as in Pascal). So I want Atom to stop displaying this:

$test = 1

And display this:

$this := 1

It’s all about display, not about placing real colon character before equality character.

So I added this to style.less:

span.syntax--keyword.syntax--operator.syntax--assignment.syntax--php::before {
  content: ':';

It does display := but while editing it from the left side cursor is being placed here :|= instead of |:=. Everything is good while editing from the right side.

Now, I tried many different ways using visibility, position, overflow, float etc. without success. I’m not listing them here as I wasn’t especially saving them and additionally after many failures I deleted everything I’ve had. :frowning:

Anyway, I’m looking for a way to achieve after and before additions and even substitutions (e.g. substitute = for UTF-8 ) in such a way that cursor is properly placed.