CODEWITHSUNDEEP
htmlcss
user1486133
user1486133

Reputation: 1487

Align :before with text both with same height

I've created a link which has a :before with an icon inside it.

I want the height of the text to be 30px and the :before to also be 30px.

I'm finding that my text is sitting much lower and has a height of 40px despite having no padding.

How can I make these two line up?

footer .social a:before {
    content:'';
    background-image:url(http://www.vpshosting.com/wp-content/themes/LondonLive/images/icon-twitter.png);
    background-repeat:no-repeat;
    width:30px;
    height:30px;
    margin-right:10px;
    display: inline-block;
}
footer .social a.twitter:before {
    background-position:0px 0px;
}

JSFiddle

Upvotes: 0

Views: 38

Answers (2)

Lenar Fattahov
Lenar Fattahov

Reputation: 141

Try to make <a> element display inline-block.

a {
    display: inline-block;
    height: 30px;
    line-height:30px;
    vertical-align: top;
}

I made fiddle https://jsfiddle.net/dv83ncwb/1/

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Used to this css

Define your .twitter class this css and footer .social a:before define vertical-align:top;

.twitter{font-size: 30px;
    display: inline-block;
    vertical-align: top;
    line-height: 30px;}
footer .social a:before {
    vertical-align: top;}

Demo 

.twitter{font-size: 30px;
    display: inline-block;
    vertical-align: top;
    line-height: 30px;}
footer .social a:before {
    vertical-align: top;
    content:'';
    background-image:url(http://www.vpshosting.com/wp-content/themes/LondonLive/images/icon-twitter.png);
    background-repeat:no-repeat;
    width:30px;
    height:30px;
    margin-right:10px;
    display: inline-block;
}
footer .social a.twitter:before {
    background-position:0px 0px;
}
<footer>
    <div class="social"> <a class="twitter">Twitter</a>

    </div>
</footer>

Upvotes: 0

Related Questions