CODEWITHSUNDEEP
csspseudo-class
themrflibble
themrflibble

Reputation: 313

Button link with :before & :after pseudo classes styled in CSS to display as a complete block

I'm having a nightmare, I have a very simple premise, it works fine when it's occupying one line...

https://i.sstatic.net/DuoOZ.png <-- it should look like this

However, if it's in a narrower column and spans over two lines, the + and the > just don't want to vertical center align.

https://i.sstatic.net/M7B9n.png <-- This is how it looks when over two lines, not my desired result

For some reason, the fiddle has the :before overlapping when it doesn't in my code. But my point mainly is, how do I get the + and > to vertically align in the middle? I think I've torn all my hair out.

HTML code

<a href="#" class="create bttn">CREATE 1st UNIT</a>

CSS code

body {
font-family: 'Open Sans', 'sans-serif';
padding: 20px;
padding-top: 50px;
background-color: #CCCCCC;
font-weight: 100;
font-size: 12px;
text-align: center;
}
.bttn{
position: relative;
display: block;
margin-top: 3px;
padding: 5px 10px 5px 40px;
background: #1E90FF;
font-size: 18px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.bttn::before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
height: 100%;
padding: 5px 10px 5px 10px;
content: "+";
background: #104E8B;
font-size: 18px;
font-weight: 500;
}
.bttn:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
padding: 5px 10px 5px 10px;
float: right;
content: ">";
font-weight: 500;
}
.create, .create::before, .create::after{
font-size: 10px;
}
.create{
padding-left: 20px;
}
.create::before, .create-coffer::after{
padding: 5px 5px 5px 5px;   
}

Upvotes: 1

Views: 786

Answers (1)

mikehobi
mikehobi

Reputation: 116

Vertical alignment is difficult when dealing with responsive elements. My suggestion would be that the 'plus' and 'arrow' icons be background-images of the psuedo elements. That way you can align them to the exact center.

Otherwise, you could align the elements vertically using the translate trick. But then you'd also need the dark blue background to be an absolute positioned span element.

    top: 50%;
    transform: translateY(-50%);

Upvotes: 1

Related Questions