A Quick Use-Case for Pseudo Elements

This is just to demonstrate a common use-case for a pseudo-element. I needed to have a button divided into two visual pieces separated by a double line that didn’t go all the way to the edges of the button. I also was only able to use a single element.

Here is what I needed to achieve:

The only HTML I could use was:

<a href="#" class="download-button">Download</a>

And the SCSS I ended up with was:

.download-button {
    float: left;
    height: 30px;
    padding: 0 0 0 16px;
    border: 1px solid #0071C5;
    border-radius: 4px;
    color: #FFFFFF;
    font: 14px/30px Roboto;
    text-decoration: none;
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.3) inset;
    background: linear-gradient(to bottom,  #007edc 0%,#007dd9 37%,#006fc1 100%);

    &:after {
        content: "\e313";
        position: relative;
        top: 50%;
        float: right;
        padding: 0 10px;
        margin: -10px 0 0 20px;
        line-height: 21px;
        border-left: 1px solid #006CC1;
        box-shadow: -1px 0 0 0 rgba(255,255,255,0.3);
        font-family: "Material Icons";
        font-size: 20px;
        padding: 0 5px;

Leave a Reply