Using HTML data-attribute to set css Content

Question

HTML

<div class="breadcrumb">
    <a href="javascript:void(0)" data-imgsrc = "../images/1.png" class="active">Browse</a>
    <a href="javascript:void(0)" data-imgsrc = "../images/2.png" class="active">Compare</a>
    <a href="javascript:void(0)" data-imgsrc = "../images/3.png" >Order Confirmation</a>
    <a href="javascript:void(0)" data-imgsrc = "../images/4.png" >Checkout</a>
</div>

CSS:

.breadcrumb a:before {
   content: url(attr(data-imgsrc));
}

Is it valid Css Rule? I want to set data-imgsrc attribute as Css Content URL..