Show logo after Site Title in Genesis Sample

In the old post on Designody, I have written about adding a logo before site title in Genesis. Today i am going to show you how you can add a logo after the Site Title in Genesis.

We will use the same approach to get this.

So, what we have to to it to make the .title-area:before to .title-area:after

What are you waiting for? Add this to your CSS file.

.title-area {
    width: 220px;
}
.title-area:after {
    background: url(/logo.svg) no-repeat !important;
    width: 80px;
    display: inline-flex;
    float: right;
    min-height: 45px;
    margin-top: -35px;
    margin-bottom: -12px;
    content: " ";
}

and the result be like this:-

Still using .png? no worry. here is the CSS for you.

.title-area {
    width: 200px;
    padding-left: 10px;
}
.title-area:after {
    background-image: url(/logo.png);  no-repeat !important;
    width: 50px;
    height: 50px;
    background-size: contain;
    display: inline-flex;
    float: right;
    margin-top: -35px;
    margin-bottom: -12px;
    content: " ";
}

The Customization is infinite and you can adjust it accordingly. Let me know if you have any issue setting this up.