Estou apenas começando a usar os avisos de equipe, mas percebi que eles são confusos quanto a qual postagem eles se referem. Acho muito difícil dizer se está relacionado à postagem acima ou abaixo dela.
Não faria mais sentido colocá-lo abaixo do divisor que separa as postagens assim?
Eu acho que isso se deve em parte ao tema que você está usando? Os cantos arredondados na parte inferior do aviso fazem com que ele pareça meio descolado da postagem abaixo. Acho que parece melhor aqui no Meta com o tema padrão? (Adicionei alguns avisos a este tópico como exemplo)
Obrigado David, mas tentei sem tema e ainda não está claro. Os exemplos que você colocou aqui são óbvios porque um é a primeira postagem e o outro tem o mapa do tópico separando-o, assim que você passa disso, não há como dizer para onde vai se você não estiver familiarizado com ele. Tente isto, remova esses avisos, responda-me aqui e adicione um aviso à minha resposta.
Quero participar da ação 
edit: Parece correto para mim
Se algo, o preenchimento é um pouco pouco:
Se você remover o aviso acima da postagem de David, acho que é muito fácil confundir a qual postagem ela se refere. Mostrei esse recurso para meus moderadores hoje e a reação imediata deles foi que não está nada claro.
(Encontrei esta postagem antiga ao revisitar algumas outras confusões de avisos de equipe…)
Sempre pensei que a colocação dos Avisos de Equipe era potencialmente ambígua. Como os temas podem lidar com coisas como cores, bordas e divisores de maneiras diferentes, provavelmente é difícil resolver dessa forma.
Uma alternativa que pode ser aplicada globalmente a todos os avisos de postagem hoje é algum CSS personalizado para inserir uma seta Unicode, antes do avatar:
.post-notice::before {
content: '🡇';
}
(Ou talvez mais corretamente):
.post-notice::before {
content: " \1F847";
}
…ou antes do conteúdo do texto:
.post-notice p::before {
content: " \1F847";
margin-right: .5rem;
}
Ooo — aqui está um truque para mudar a cor:
.post-notice p::before {
content: " \1F847\fe0e";
color: yellow;
margin-right: .5rem;
}
(Anexar \fe0e a qualquer caractere Unicode renderiza uma versão de texto que aceita cor. Referência.)
E decidi que a seta para baixo não fica bem para um aviso no tópico principal, pois está mais obviamente levando o tópico. Este CSS substitui a seta por um marcador apenas para a primeira postagem:
#post_1 .post-notice p::before {
content: " \29BF\fe0e";
color: yellow;
margin-right: .5rem;
}
Ótima ideia Todd! Fico feliz que eu não seja o único louco 
Tive alguns problemas com a exibição daquela seta para baixo, então a modifiquei ligeiramente, também a limpei um pouco e optei pela cor terciária para compatibilidade com o tema.
.post-notice p::before {
content: "\2B07\FE0E";
color: var(--tertiary);
margin-right: .5rem;
}
#post_1 .post-notice p::before {
content: "\29BF\FE0E";
}
Por causa de como as postagens são ordenadas em um tópico e quando eu rolo, para mim parece natural e lógico esperar que se refira à postagem abaixo. a seta é um bom toque e uma boa solução para mais indicação. Você também pode usar uma referência no aviso da equipe.
Sem ofensa, mas isso parece um “Eu sei e estou acostumado, então parece autoevidente para mim”. Eu argumentaria que o aviso da equipe obviamente só pode ter sido colocado DEPOIS que a postagem foi publicada. Então, parece natural esperar que o aviso da equipe esteja depois dela, se as coisas forem “em ordem”.
Pessoalmente, acho que @davidkingham definitivamente tem um ponto: é ambíguo. Seria melhor se pudesse parecer mais claro para qualquer pessoa à primeira vista. O que não é realmente o caso, aqui (Se for desejado no topo das postagens, o aviso da equipe abaixo do nome do autor o tornaria extra claro, por exemplo. Isso pode ser tecnicamente mais complicado ou não agradar por outros motivos).
Para alguns temas (como o tema Meta Branded que estou usando agora), o aviso da equipe fica abaixo da linha que separa as postagens, então fica claro a que o aviso se refere.
Talvez outros temas pudessem adotar isso também?
isso pode muito bem ser. 
acho que o que eu estava tentando dizer (mas mal) é que parece lógico quando rolo um tópico que ele se refere à postagem abaixo, apesar da ordem lógica cronológica das postagens.
Por que o primeiro aviso da equipe não tem uma linha, mas os outros?
Eu pessoalmente não uso avisos da equipe por causa do problema discutido aqui. Tentei dar mais visibilidade, mas mover para a direita é provavelmente uma necessidade.
Olá, como faço para exibir os avisos da equipe abaixo da postagem em vez de acima dela?
Com licença, há alguma maneira de fazer isso com CSS?
Eu pessoalmente também acho que seria mais lógico colocar os avisos DEPOIS da postagem. Ainda não encontrei uma maneira simples de movê-los para lá, e como solução temporária adicionei este estilo CSS:
.post-notice.custom {
background: linear-gradient(to bottom, rgb(255 0 5) 0%, rgba(255, 137, 139, 0.2) 2%, rgba(255, 137, 139, 0) 70%);
}
agora os avisos ficam assim:
Graças à direção do gradiente, torna-se intuitivamente claro onde está sua “continuação lógica”.
Note que usei uma regra com a classe .custom, pois essa classe não se aplica a avisos automáticos, que são criados, por exemplo, quando um usuário escreveu sua primeira mensagem ou escreveu após um longo período. Para tais casos, podemos usar outras cores de gradiente.
A propósito, gostaria de saber se há alguma maneira de ver quais outras classes podem existir para os avisos e se a classe .custom é aplicada apenas a avisos da equipe ou em outro lugar?
