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

[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.

[help]

Que eu sei são duas vezes :

div::before {
div::after {

Edited May 3, 2015 at 05:40 PM by apocsantos
tag code + geshi

[RuiAlmeida20]

Nao, ja tentei, nem uma nem outra maneira

[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>

Edited May 5, 2015 at 08:33 PM by apocsantos
geshi

[RuiAlmeida20]

Tens de perceber, que nao apareco no html quando faco inspecionar elemento...

[help]

Você tem uma lista. Qual seu objetivo de usar o before e after?

[RuiAlmeida20]

Fazer 2 triangulos com o before e o after

[help]

Tem como fazer uma figura do que está falando?