Some CSS styles not honored by decorations


Hi, I am trying to create a decoration of type highlight that has the following CSS styles:

.my-class .region {
  text-decoration: underline;
  cursor: pointer;

I know that my marker is working correctly because if I add something like background-color: red, then that shows up.

Also, I know that I can use border-bottom: 1px solid red as an alternative to text-decoration: underline, but then I have to pick the color of the border rather than the underline color automatically matching the text color.

It would also be nice if text-decoration-style: wavy worked, but there’s some debate as to whether this is fixed in Chrome:

Bracket-matcher animation

Decorations are actually divs behind the text, not decorations of the text itself. So, yes, certain styles won’t work.

Also, I have done a lot of research into wavy underlines and have come up with something that works with the decoration system. You can find it in my red-wavy-underline package. If you have questions about how to use the style created there in conjunction with other packages … let me know.


Hmm, do you know of any examples of Atom packages that change the cursor? Do I need to come up with some sort of mega-hack?

Your red-wavy-underline package looks promising, though!


There’s this topic about how one can approximate a block cursor:


@leedohm Unfortunately, that is about the text cursor (which is not controlled by the cursor property in CSS), and I am trying to control the mouse pointer cursor. Nevertheless, I got the following to work: .editor-contents {
  cursor: pointer;

Where I enable .my-class on .editor while my spring-loaded decoration is in play. This is sufficient to override the existing .editor-contents { cursor: text; } rule.


Ah ok … I also have a package for making the mouse pointer white, white-cursor, which might be helpful to people wanting to do more advanced things with the mouse pointer.