Sobrescrito apenas em CSS?

Como posso executar o sobrescrito, apenas em CSS?

Eu tenho uma folha de estilo onde marco os links externos com um caractere sobrescrito, mas estou tendo dificuldades para alinhar o caractere corretamente.

O que eu tenho atualmente, fica assim:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

mas não funciona.

Naturalmente, eu usaria o <sup>-tag, apenas se contentpermitiria HTML ...

Você pode fazer sobrescrito com vertical-align: super(mais uma font-sizeredução que o acompanha ).

No entanto, não deixe de ler as outras respostas aqui, especialmente as de paulmurray e cletus , para obter informações úteis.

Honestamente, não vejo sentido em fazer sobrescrito / subscrito apenas em CSS. Não há um atributo CSS útil para isso, apenas um monte de implementações domésticas, incluindo:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

ou usando alinhamento vertical ou tenho certeza de outras maneiras. O problema é que isso começa a ficar complicado:

• Espaçamento sobrescrito CSS na altura da linha;
• Cuidado com CSS para sobrescrito / Subcript sobre por que você, sem dúvida, não deve estilo sobrescrito / subscrito com CSS em tudo ;

O segundo ponto vale a pena enfatizar. Normalmente, sobrescrito / subscrito não é realmente uma questão de estilo, mas é indicativo de significado.

Nota lateral: vale a pena mencionar esta lista de entidades para expressões matemáticas comuns de sobrescrito e subscrito, mesmo que essa pergunta não esteja relacionada a isso.

As tags sub / sup estão em HTML e XHTML. Eu apenas usaria isso.

Quanto ao restante do seu CSS, os atributos pseudoelemento e conteúdo: after não são amplamente suportados. Se você realmente não deseja colocar isso manualmente no HTML, acho que uma solução baseada em Javascript é sua próxima melhor aposta. Com o jQuery, isso é tão simples quanto:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

A documentação CSS contém o equivalente em CSS padrão do setor para todas as construções HTML. Ou seja: a maioria dos navegadores web estes dias não explicitamente lidar com SUB, SUP, B, Ie assim por diante - eles (kinda sorta) são convertidos em SPANelementos com propriedades CSS apropriadas, e o motor de renderização só lida com isso.

A página é o Apêndice D. Folha de estilos padrão para HTML 4

Os bits que você deseja são:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Eu estava trabalhando em uma página com o objetivo de ter um texto claramente legível, com elementos sobrescritos NÃO alterando as margens superior e inferior da linha - com as seguintes observações:

Se, line-height: 1.5empor exemplo, no seu texto principal , você deve reduzir a altura da linha do texto sobrescrito para que ele apareça corretamente. Eu usei line-height: 0.5em.

Além disso, vertical-align: superfunciona bem na maioria dos navegadores, mas no IE8 quando você tem um elemento sobrescrito presente, o restante dessa linha é pressionado. Então, em vez disso, usei vertical-align: baselinejunto com um negativo tope position: relativepara obter o mesmo efeito, que parece funcionar melhor nos navegadores.

Então, para adicionar às "implementações caseiras":

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

http://htmldog.com/articles/superscript/ Essencialmente:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

Funciona bem na prática, até onde eu sei.

O seguinte é retirado do html.css interno do Mozilla Firefox:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Então, no seu caso, seria algo como:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Esta é outra solução limpa:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

Dessa forma, você ainda pode usar as tags sup / sub, mas corrigiu o comportamento idioso para estragar sempre a altura da linha do parágrafo .

Então agora você pode fazer:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

E a altura da linha do parágrafo não deve ser estragada.

Testado no IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Eu testei usando um p {line-height: 1.3;} (que é uma boa altura da linha, a menos que você queira que suas linhas fiquem muito próximas) e ainda funcione, pois "-0.6em" é uma quantidade tão pequena que também com essa altura da linha o texto sub / sub cabe e não se revezem.

Esqueci um detalhe que pode ser relevante. Eu sempre uso DOCTYPE na 1ª linha da minha página (especificamente eu uso o HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Portanto, não sei se esta solução funciona bem quando o navegador está no modo quirkmode (ou não no modo padrão) devido à falta de DOCTYPE ou a um DOCTYPE que não aciona o modo Padrão / Quase Padrão.

Se você estiver alterando o tamanho da fonte, convém parar de diminuir os tamanhos com esta regra:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Não tenho certeza se isso está relacionado, mas resolvi meu problema com ²entidades HTML, pois não consegui adicionar outras tags html dentro de uma <label>tag. Portanto, a ideia era usar códigos ASCII em vez de tags css ou HTML.

Confira: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

se parece que você deseja "vertical-align: text-top"

A propriedade CSS font-variant-positionestá em consideração e pode ser a resposta para esta pergunta. No início de 2017, apenas o Firefox suporta.

.super {
    font-variant-position: super;
}

Veja MDN .

Relacionado ou talvez não relacionado, o uso de sobrescrito como elemento HTML ou como span + css no texto pode causar problemas com a localização - em programas de localização.

Por exemplo, digamos que "3 ^rd software partido":

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

Como os tradutores podem traduzir "rd"? Eles podem deixá-lo vazio para várias línguas cirrílicas, mas e outras línguas exóticas ou RTL?

Nesse caso, é melhor evitar o uso de sobrescritos e usar uma redação completa como "software de terceiros". Ou, como mencionado aqui em outros comentários, adicionando sinais de adição em sobrescrito via jQuery.

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Aqui está a maneira exata como o sup usa:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

Encontrei isso através do elemento de inspeção do google chrome.