Highlight entire line depending on syntax?


I’m writing a user style for some extension to markup; what I’d like to do is to highlight the entire line that a given element occurs on. I currently have this:

atom-text-editor::shadow {
  .line .gfm.region {
    background-color: @background-color-info;

where .gfm.region is the syntax category matched. Now this does set the background color to a blue, but that extends only as far as the text in that line. I’d like to hvae a blue background across the full editor width. Is that possible?

(BTW not sure whether the selector shouldn’t be more specific; anyone else could accidentally be using .gfm.region)


I think you can use something like this:

.line {
  position: relative;

  .gfm.region::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -100;
    background-color: @background-color-info;
    content: '';


works as advertised, thanks a lot indeed!