Olha existe um jeitinho que pode te ajudar. Tudo bem que não é muito elegante, e para se usar no site inteiro vai ser meio chato, mas resolve o problema de uma certa maneira...
O que eu fiz aqui é usar um custom attr, que chamei de data-text
e coloquei dentro dele o mesmo texto que está dentro da tag. Depois criei um pseudo-elemento ::after
no elemento que tem o texto. E nesse ::after
no CSS usei o content=""
para incluir o texto do data-text
, ficando assim: content: attr(data-text);
Como disse, talvez seja uma técnica não muito prática, mas em um texto ou outro pode te ajudar.
Repare que agora ao fazer a seleção a cor do BG não fica mais por cima do texto!
OBS: Deixei os comentes no código
.tex_nome::selection {
background: #fff;
}
.det_tex {
position: absolute;
height: 485px;
width: 325px;
background-color:green;
}
.tex_marca{
top:60px;
position: absolute;
font-size: 18px;
font-family: 'Titillium Web', sans-serif;
}
.tex_nome{
top:85px;
position: absolute;
font-size: 30px;
font-weight:bold;
font-family: 'Titillium Web',sans-serif ;
line-height: 26px;
}
.tex_nome:nth-child(2){
top:185px;
}
.tex_nome::after{
/* Aqui seria o texto que vai ficar por cima do texto original */
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
<div class="det_tex">
<div class="tex_marca">marca</div>
<div class="tex_nome">Lorem ipsum dolor sit amet consectetur.</div>
<!-- o que estiver no data-text deve ser o mesmo texto dentro da tag -->
<div class="tex_nome" data-text="Lorem ipsum dolor sit amet consectetur.">Lorem ipsum dolor sit amet consectetur.</div>
</div>