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


#1

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.