CSS3

Propriedades CSS

Para evitar a criação de elementos HTML vazios, pode-se usar os (pseudo-elementos) em objetos no HTML. Em vez de criar um span vazio no começo ou no final de um elemento -para colocar um detalhe qualquer- use os pseudo-elementos que funcionam como um span vazio e não desperdiçam código.

Propriedade “content”

Para estilizar um caractere ou uma imagem à esquerda ou a direita de um texto, título etc., usa-se a propriedade content que cria um conteúdo estático utilizando os pseudo-elementos ::after e ::before. Lembrete: o W3C determinou que pseudo-elementos usem sempre :: em vez de apenas : (para diferenciar das pseudo-classes.) Ela foi implementado no CSS2, sendo suportada na maioria dos browsers.

Na folha de estilo:
a:before{ content : “+ ”; }
 
a:after{ content : “+ ”; }

Exemplo de uso:

Aqui será inserida a palavra before

mais...

A propriedade content pode ter os seguintes valores:

none, normal. O conteúdo não vai ser gerado.

<string>

Uma string de texto normal.

url()

url de imagem ou herança. Aqui ela permite inserir imagens de fontes externas.

counter() (contador)

Aqui são inseridos contadores.

attr(attribute)

Aqui permitimos pegar o valor de um determinado atributo do elemento. open-quote, close-quote, no-open-quote, no-close-quote Gera automaticamente marcações de aspas.
Lembrete: a propriedade content só pode ser usada nos pseudo-elementos ::after ou ::before.

STRING

Exemplo de texto no início ou no fim do elemento.

<h1>Título</h1>

Título em HTML. Para inserir neste título algum conteúdo no início ou no final. Se for de interesse que todos os títulos comecem com o caracter “*: “. Em vez de ir direto no HTML, faz-se o CSS da seguinte forma:

	h1::before{
	   content: "*";
	}

Se fosse pouca coisa, a palavra poderia ir direto no HTML. Mas se precisar usar em vários lugares, o mais rápido será usando o css. Obs: O sinal acima somente organiza visualmente os títulos, portanto não deve ser colocado direto no HTML. (Os sistemas de busca indexariam o título com o sinal e os leitores de tela também o leriam.)

URL()

Para inserir uma imagem, nos ítens de uma lista. (Declarar uma classe antes se tiver menu com li.)

	
li::before {
    content: url(/static/img/estrelinha.jpg);
}

li {
    list-style: none;
}

Voltar ao topo