Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #59 da revista programar. Faz já o download aqui!

RuiAlmeida20

:after :before não estão a aparecer

Mensagens Recomendadas

RuiAlmeida20    1
RuiAlmeida20

Boas, gostava de saber qual o erro que tenho para impedir o after e o before de aparecere, código;

<ul class="socialicons socialicons-left">
		<li class="fa-stack fa-fw">
			<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Follow on twitter">
				<i class="fa fa-stop fa-stack-2x"></i>
				<i class="fa fa-twitter fa-stack-1x"></i>
			</a>
		</li>
		<li class="fa-stack fa-fw">
			<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Like on facebook">
				<i class="fa fa-stop fa-stack-2x"></i>
				<i class="fa fa-facebook fa-stack-1x"></i>
			</a>
		</li>
		<li class="fa-stack fa-fw">
			<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Follow on instagram">
				<i class="fa fa-stop fa-stack-2x"></i>
				<i class="fa fa-instagram fa-stack-1x"></i>
			</a>
		</li>
		<li class="fa-stack fa-fw">
			<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Subscribe on youtube">
				<i class="fa fa-stop fa-stack-2x"></i>
				<i class="fa fa-youtube fa-stack-1x"></i>
			</a>
		</li>
	</ul>

.socialicons {
min-width: 200px;
min-height: 50px;
margin: 0 auto;
top: 155px;
left: 580px;
position: absolute;
}
.socialicons-left {
min-width: 50px;
max-width:50px;
min-height: 200px;
max-height:200px;
margin: 0 auto;
top: 500px;
z-index:1010000;
left: 0;
position: absolute;
background:#32688f;
}
.socialicons:before {
clear:both;
  width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 0 50px;
border-color: transparent transparent transparent #007bff;
}
.socialicons:after {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 0;
border-color: #007bff transparent transparent transparent;
}
.socialicons li {
	width: 45px;
height: 45px;
line-height: 45px;
}
.socialicons li .fa-stack-2x {
font-size: 45px;
}
.socialicons li i {
font-size:30px;
}
.fa-youtube {
color:#cd201f;
}
.fa-instagram {
color:#3f729b;
}
.fa-facebook {
color:#3b5998;
}
.fa-twitter {
color:#55acee;
}
.socialicons a, .socialicons a:hover {
color:#fff;
cursor:pointer;
}

Obrigado.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
help    0
help

::after serve para adicionar um elemento após o outro. :: before serve para adicionar um elemento após o outro

Os elementos que você coloca tem tamanho zero.

.socialicons::before {
 clear:both;
width: 0;
 height: 0;

Define ai algum tamanho para ver se não é esse o problema.

Vou deixar aqui um exemplo básico para você

<style>
div::before {
content: "antes ";
color:blue;
}
div::after {
content: " após";
color:green;
}
</style>

<div>texto</div>

Editado por apocsantos
geshi

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.