Please Meet The :after CSS Attribute

13 January 2013

Not a lot of people use :after when styling a webpage with CSS. That’s a shame because it’s really powerful! And the best thing is there is really good support for this (pseudo) selector so you can use it everywhere you want..

All you need is this HTML:

<div class="box">some text</div>

And this CSS:

* {
    font-family: 'futura';
    text-transform: uppercase;
    color: white;
    text-align: center;
}

.box {
    position: relative;
    display: inline-block;
    padding: 20px 50px;
    margin: 30px 30px;
    border-radius: 5px;

    background-color: #00D18D;
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px;
}

.box:before {
    content: '';

    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;

    width: 0;
    height: 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #00D18D;
}

As a bonus; check out the shapes of css.

Jankees van Woezik profile picture

Hello, I'm Jankees van Woezik

Like this post? Follow me at @jankeesvw on Twitter