CSS Tag details e summary como mudar a seta de lugar

[dev aleatorio]

Oi o que eu gostaria da ajuda é de como mudar a seta de posição da tag summary que naturalmente fica na esquerda e queria passar para a direita

A unica coisa que sei que ela funciona assim

aqui ela muda de cor
summary::marker{    
    color: red;
    
}

 

[dev aleatorio]

ahh outra coisa que queria saber se ela faz animações , eu queria deixar a seta piscando eu tentei porém não funcionou

Citação

 

details > summary{
    background-color: RGB(179, 255, 0);
    cursor: pointer;
    
} 

@keyframes blink{
  to {
    visibility: hidden;
   	animation: blink 1s steps (5,start) infinite;
    }
}

 

 

[DiF]

@dev aleatorio Você não pode mover a seta.  Mas você pode ocular ela, e substituir por uma nova e ainda adicionar o efeito desejado nela...

 

Exemplo:

<details>
  <summary> Capitulo 1</summary>
  Aqui é revelado algo quando clicado no título do capitulo.
</details>

 

CSS:

/* Oculta a seta original do elemento */
details>summary {
 
  list-style: none;
}
summary::-webkit-details-marker {
  display: none
}

/* Coloca a uma nova seta na direita por causa do pseudo-elemento ::after */
summary::after {
  content: ' ►';
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

/* modifica a seta pra baixo quando clicar */
details[open] summary:after {
  content: " ▼";
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

/* Animação */
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

 

Veja funcionando: https://jsfiddle.net/dife/vouwc340/1/

[dev aleatorio]

@DiF  oi mt obrigado por responder , agoraa na tua opinião tu faria isso nesse modo ou faria com javascript?  eu não sei se essa tag details é mais indicada , tu sabe me dizer?

[DiF]

@dev aleatorio Depende do objetivo.  Se é para criar um sumário de um documento por exemplo, um FAQ,  eu usaria esse método... porque CSS é sempre mais indicado quando possível... 

Por exemplo, se uma pessoa desabilitar o javascript,  o CSS permanece funcionando.

 

[dev aleatorio]

@DiF minha preocupação é com acessibilidade , se essa tag é bem aceita e tal porque assim , mts tags deixam de ser utilizadas

[DiF]

@dev aleatorio Nesse caso em especifico, não precisa se preocupar.  A tag detail e summary é suportada pela maioria dos navegadores.. Chrome, Edge, Firefox...  claro que outro menos conhecidos podem até não suportar ainda..  mas sempre você pode contornar o problema.

Se o navegador em especifico, não aceitar,  você pode criar uma função em javascript que "cria" o elemento. 

 

Por exemplo:

const details = document.createElement('details');
const p1 = document.createElement('p');
const p2 = document.createElement('p');

p1.textContent = '- Texto incluso com javascript.';
p2.textContent = 'Este texto foi incluido criando o elemento  detail no javascript';

details.appendChild(p1);
details.appendChild(p2);
document.body.appendChild(details);

 

Veja funcionando: https://jsfiddle.net/dife/t9pdykaz/

Dessa forma, por exemplo você pode testar ...  SE o usuário não estiver com o chrome, firefox ou edge,   você usa uma função criando o detail.  Assim, você faz com que outros navegadores passarem a suportar a tag também.