How to set random with for each pseudo-element

I want to set random width for each h3:after with jquery. Firstly I faced the problem with impossibility to set style to a pseudo element with jQuery. Okay, now Im set style like this:

$(.service-block h3).append('<style>.service-block h3:after{width:20px;}</style>');

..aand thats working, but unfortunately I cant set random width, tried with that dumb way:

$('.service-block h3').each(function() {
        var rand = Math.floor(Math.random() * 150) + 60;
    $(this).append('<style>.service-block h3:after{width:'+ rand +'px;}</style>');
});

.service-block h3::after{content:' '; margin-top: 5px; display:block; border-radius:4px; height: 3px; background: -webkit-gradient(linear, right bottom, left top, from(#ff2c9c), color-stop(#ff287b), color-stop(#ff395a), color-stop(#ff5137), to(#ff6a00)); background: linear-gradient(to left top, #ff2c9c, #ff287b, #ff395a, #ff5137, #ff6a00);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-sm-12 col-md-12 service-block">
                                                <div class="service-image">
                                                        <div class="col-sm-12 padding-right">
                                                                <h3>Test</h3>
                                                        </div>
              <div class="col-sm-12 padding-right">
                                                                <h3>Test</h3>
                                                        </div>
              <div class="col-sm-12 padding-right">
                                                                <h3>Test</h3>
                                                        </div>
              <div class="col-sm-12 padding-right">
                                                                <h3>Test</h3>
                                                        </div>
              </div>
              </div>