How I write a:hover::before in less file?

Question

I have some CSS rules and just I need to write them in my LESS CSS file.

This is my CSS -

div.files a > div,
div.files a:before {
    transition: background-color 350ms;
}

div.files a:hover > div {
    background-color: #000;
}

div.files a:hover::before {
    background-color: #017BC6;
}

This is how I tried it in my less css file. But can't get it to work.

UPDATE:

> .files {
    margin-top: 18px;
    ....

    a {
        position: relative;
        text-decoration: none;
        margin-bottom: 10px;
        .....

        &:last-child {
            margin-bottom: 0;
        }

        &:before {
            background-color: #000;
            transition: background-color 350ms; 
            ....
        }

        &:hover {
            content: "";
            .block {
                background-color: #000;
            }

            &::before {
                background-color: #017BC6;
            }
        }


        .block {
            background-color: #017BC6;
            transition: background-color 350ms;
            ....

            .name {
                ....
            }

            .meta {
                ......

                &:after {
                    ....
                }

                .date {
                    ...
                }

                .format {
                    ...

                    &:before {
                        ...;
                    }                               
                }
            }    
        }
    }

    div {
        ......
    }
}

This is my HTML -

<div class="files">
    <a href="#">
        <div class="block">
            <div class="name">.......</div>
            <div class="meta">
                <div class="date">.....</div>
                <div class="format">....</div>
            </div>
        </div>
    </a>
</div>

I am confusing how to write this kind of rules in less (a:hover::before).

Hope someone may help me out. Thank You.

Solution

As discussed in the chat, there were a few corrections that needed to be made and they are as follows:

1. The typo in the &::befor had to be corrected to &::before.
2. The parent selector (the topmost one) had to be modified from > .files to div.files because we are looking to apply the styles to the div element with class='files' and its descendants.
3. The transition wasn't working initially because of nesting issues and the presence of content: ""; within the :hover selector.

Full code:

html {
    font-family: Arial, Helvetica, sans-serif;
}

div.files {
    position: relative;
    display: block;
    padding: 4px 4px 4px 0;
    text-decoration: none;
    counter-reset: file;
    a {
        position: relative;
        display: block;
        padding: 4px 4px 4px 62px;
        text-decoration: none;
        counter-increment: file;
        & .block, &:before {
        transition: background-color 350ms;
        }
        &:hover {
              > div {
              background-color: #000;
              }
              &::before {
            background-color: #017BC6;
              }
        }
    }
    a:before {
        content: counter(file);
        display: block;
        position: absolute;
        top: 2px;
        left: 2px;
        width: 68px;
        height: 68px;
        border: 5px solid #fff;
        background-color: #000;
        border-radius: 50%;
        text-align: center;
        line-height: 72px;
        color: #fff;
        font-size: 40px;
        font-weight: bold;
    }
    div {
        line-height: 1em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
        a > div {
        padding: 14px 14px 14px 28px;
        background-color: #017BC6;
    }
        .name {
        margin: 0 0 14px 0;
        font-size: 18px;
        color: #fff;
    }
    .meta {
        font-size: 14px;
        color: #bebfba;
        font-weight: bold;
                &:after {
            content: "";
            display: block;
            clear: both;
            }
    }
        .date {
        float: left;
    }
        .format {
        float: right;
                &:before {
            content: "Format | ";
            }
    }
}

Demo

Comments

[Morklympious]

Oops. Sorry about that. Changed my answer to reflect it :)