Hi,
I have a testimonial slider which is displaying an arrow effect using after, but it’s not displaying on the larger box.
It seems each box has to be the same height as each other, but not all content in each box will be the same.
This is a fiddle of what I mean:
Can anyone see why this is happening?
It’s because slick list has overflow:hidden applied and the big box fills the whole space so the arrow is missing because it is outside .slick-list now.
You could try adding padding-bottom:20px to slick-list (assuming that doesn’t interfere with the slider behaviour) and that should keep the arrow inside…
Awesome, padding-bottom:20px worked 
Thank you!
I am having some trouble giving the “arrow” a border around the triangle so the whole box looks like a speech bubble. I have the border around the main box, but I can’t get the arrow to have a 2px border to just the left and right.
Is it possible to give the :after border a second border?
This is what I have:
The usual wayto do this is to shim the :before element underneath in a different colour and then offset it by 1px (or 2px for 2px borders).
e.g.
.testimonial-bubble:before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #999;
border-bottom: 0;
margin-left: -20px;
margin-bottom: -21px;
}
You could do it with one pseudo element if you just use a square box widfth borders and rotate it 45degrees. This assumes the arrow is the same color as the box because they will overlap.
e.g.
.testimonial-bubble:after {
content: '';
position: absolute;
bottom: -11px;
left:0;
right:0;
margin:auto;
width:20px;
height:20px;
background:#f6f6f6;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
transform:rotate(45deg);
}
Thank you, The :after version worked
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.