Function separator line


Hello Guys,
Last week I did a job and I had to do a long file (a really long file) with a lot of methods and I started to miss a line between the methods.
In my research on the internet I saw it in the PHPstorm, when you type “function” automatically he’s put a line above the function.

I tried to do editing the CSS of my theme, like bellow:

        border-top:1px solid gray;
        border-top:1px solid gray;

The problem is, the border-top is above the words instead the line.
Someone have an ideia how to put this “methods separator” in the theme and above the line of each method?



You can insert a pseudo-element that stretches the entire width of the editor:

atom-text-editor::shadow {
  .meta.function::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
    background: @syntax-wrap-guide-color;

edit: it’s actually better to @import "syntax-variables" in your stylesheet and then use @syntax-wrap-guide-color or something instead of a hardcoded color.


For the heck of it, this is now a package: Not sure if it meets the minimum lines of code to warrant a package :sunglasses: , but perhaps it answers future “how can I do this” questions and make life easier for some.