Como mudar a palavra DESCONTO para OFF

Layout
1

Gostaria de deixar a % de desconto pore´m com a palavra OFF dentro de um globo vermenlho assim como na foto abaixo alguém consegue me ajudar?

image

1 curtida
2
1 curtida
3

Achei esse ai mais não funcionou.

4

2bc8b4e0-c280-4a5f-931d-4663acdb109d
2bc8b4e0-c280-4a5f-931d-4663acdb109d540×1140 51.2 KB

/TAG desconto OFF/

.listagem .listagem-item span.fundo-principal.bandeira-promocao {
background: #ed2e2e;
color: #ffffff;
box-shadow: 0 0 0;
border: none;
width: 53px;
height: 53px;
border-radius: 60px;
opacity: 1!important;
text-align: center;
font-size: 15px;
padding-top: 10px;
}

.bandeiras-produto span {
display: inline-block;
padding: 0 10px;
line-height: 17px;
color: #cd0303;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
margin: 0 3px 3px 0;
border: 1px solid #FFF;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
white-space: nowrap;
}

.listagem .listagem-item span.fundo-principal.bandeira-promocao:after {
content: “off”;
display: block;
text-align: center;
font-weight: 600;
}

5

@Leonardo_Vicentini_F Consegui esse mas ele fica desconfigurado.

6 
/TAG desconto OFF/

.listagem .listagem-item span.fundo-principal.bandeira-promocao {
background: #ed2e2e;
color: #ffffff;
box-shadow: 0 0 0;
border: none;
width: 53px;
height: 53px;
border-radius: 60px;
opacity: 1!important;
text-align: center;
font-size: 15px;
padding-top: 10px;
}


$(function(){
   $(".bandeira-promocao").each(function(){
       $(this).html($(this).html().replace('Desconto','<br>Off'));
   });
});

image
image1649×871 407 KB

2 curtidas
7

Copiei e colei mas não mudou, Esse de cima é CSS e o outro HTML certo?

8

O primeiro é CSS
O segundo e JavaScript

9

image
image1197×479 143 KB

Está quadrado e preto

10

não achei o CSS configurado.

11

Concertei e continua, como conseguiu fazer aparecer certo para você?

12

tem um CSS interferindo…

image
image993×594 110 KB

13

@Leonardo_Vicentini_F Tirei o CSS mas ele é o código queme passou certo?
Sem ele não fica daquele jeito.

Essa é a parte que removi

.bandeiras-produto span {
display: inline-block;
padding: 0 10px;
line-height: 17px;
color: #cd0303;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
margin: 0 3px 3px 0;
border: 1px solid #FFF;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
white-space: nowrap;
}

Removi também a parte de horário de atendimento e nada.

image

14

Leooooo top demais, ja estava doido atras disso…muito obrigado amigooo!!! TOP. Funcionou certinho aqui.

1 curtida