Quantcast
Channel: Tópicos
Viewing all articles
Browse latest Browse all 14700

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

$
0
0
Boas, gostava de saber qual o erro que tenho para impedir o after e o before de aparecere, código;
Código (HTML):
<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>
Código (CSS):
.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.

Viewing all articles
Browse latest Browse all 14700

Trending Articles