Não tem como fazer o que pretende utilizando apenas CSS, isso porque, quando você define a variável no CSS --dominioSite
com o valor https://meudominio.com
automaticamente o navegador não vai entender o que é este valor e provavelmente vai ignorar.
Isso acontece, justamente porque as variáveis em CSS são semelhantes as propriedades CSS (propriedade
+ valor
) só que de forma com nomes customizados ou seja, precisam ter valores válidos em código CSS para poderem funcionar como, por exemplo, border 1px solid black
, red
, 10px
, uppercase
, contain
e etc. E o valor passado como URL entre as aspas (''
) não é válido.
O máximo que você conseguiria fazer com o CSS é usar a propriedade content em conjunto os pseudo-elementos ::before ou ::after para "concatenar" duas strings:
<html>
<head>
<style>
.btn-view::after {
content: "https://meudominio.com" "/assets/imgs/eye.jpg";
}
</style>
</head>
<body>
<div class="btn-view"></div>
</body>
</html>
Porém, tanto ::before
quanto ::after
são usados para gerarem conteúdo no elemento (adicionando conteúdo antes e depois) e não de certa forma incorporar algo no elemento e os mesmos não dariam para serem usados como valores em conjunto com as variáveis do CSS já que voltaria ao que foi dito antes os valores seriam inválidos. Por tanto, o melhor a se fazer é usar JavaScript para contornar o que deseja fazer.