Add css style to line in editor that contains certain span class


I would like to add the border-bottom attribute to certain lines in the editor view.
A part of the html code of my editor view looks like this:

<div class="line" data-screen-row="103">
    <span class="syntax--source syntax--python">
        <span class="syntax--comment syntax--line syntax--number-sign syntax--python">
            <span class="syntax--punctuation syntax--definition syntax--comment syntax--python">
            <span class="syntax--entity syntax--name syntax--section syntax--breakpoint">

Whenever a line holds a span with the “syntax–section syntax–breakpoint” class I would like to add a bottom-border to it. Maybe that can be done with adding a class to the parent div using coffee script and then adding css code to my stylesheet?
However I don’t understand how to search through editor lines in a coffee script function.
I would greatly appreciate if someone could help me!


I was able to put some code together:

pythonCellSeparatorLines = ->
    e = atom.workspace.getActiveTextEditor()
    view = atom.views.getView(e)
    lines = view.shadowRoot.querySelectorAll(".syntax--breakpoint")
    if lines != null
        for l in lines
            console.log l

atom.commands.add 'atom-text-editor',
    's:python-cell-separator-lines': -> pythonCellSeparatorLines()

When I am within a Python file and execute the command s:python-cell-separator-lines it successfully adds a class label to the parent div. Using a predefined style I can now make the line underlined:

    .s-separator-line {
        border-top: 1px solid red;

However, not all lines are selected in the querySelectorAll but only the ones that are visible in the current view. Once I scroll down a bit further and back up, all the underlined lines are gone again.
Can someone please help me solve the issue?