Bootstrap文件浏览器使用data属性更改内容

Question

我正在尝试使用如下所示的数据属性更改bootstrap文件浏览器上的文本，但它只显示空格：

HTML

<label className="custom-file">
        <input onChange={props.onChangeFileBrowser} id="files" type="file" className="custom-file-input "/>
            <span className="custom-file-control" data-content="Test Content"></span>
    </label>

CSS

.custom-file-control:lang(en)::after {
content: attr(data-content) !important;
}

注意：直接在样式表中设置内容时可以使用它！