Set a background image of CSS :before tag programatically

Question

I have an menu on my site that sets the icons for the buttons for buttons using the :before tag. This works fine for static elements that can be set in CSS. Some of buttons would load in from specific user settings on the site. Is there a way to set these in CSS using something like this:

.nav-team:before{ background-image:url(attr(src)); }

<li class="nav-team" src="assets/images/profile.png"><a href="#">Team Name</a></li>

As obviously that doesn't work and isn't supported well as mentioned here

I may be wrong but as far as I'm away the :after tag cant be targeted or altered in javascript/jquery.

I'm open to any suggestions, javascript, css or php.

HTML:

<li class="nav-btn nav-team" src="assets/images/profile.png"><a href="#">Team Name</a></li>

CSS

li{
    border-top: solid 1px rgba(0, 0, 0, 0.125);
    margin: 0.5em 0 0 0;
    padding: 0.5em 0 0 0;
    position: relative;
}
.nav-btn{
        text-indent:1.5em;
     }
    .nav-btn:before {
        font-family:'FontAwesome';
        position:absolute;
        top:50%;
        -ms-transform:translateY(-50%);
        -o-transform:translateY(-50%);
        -moz-transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        left:-2em;
        background-size: auto 1.5em;
        background-repeat: no-repeat;
        background-position: 1.5em center;
        width: 3.5em;
        height: 1.5em;
        content:' ';
    }
.nav-team:before{ background-image:url(attr(src)); }
.nav-home:before{ background-image:url(../icons/feed.svg); }
.nav-envelope:before{ background-image:url(../icons/messages.png); }

Answer 1

First of all, attr() funtion in css is not supported for background-image property.

as the Answer in Question, you can write javascript for set background image.

You can do this by Jquery

    var count = 0;
    $('.nav-team').each(function(){
        var nav_team = $(this);
        var data_id='nav_team'+count
        nav_team.attr('data-id',data_id);
        var srcPath = nav_team.attr('src')
        $('head').append('<style></style>');
        $('head style:last').append('[data-id="' + data_id + '"]{  background-image: url("' + srcPath + '"); }');            count++;
    });