Home › Forums › CSS › Pseudo open/close quote marks mess up on browser resize (slideshow) › Reply To: Pseudo open/close quote marks mess up on browser resize (slideshow)
May 10, 2016 at 8:37 am
#241448
grimski
Participant
Weird @bearhead, so do you meant essentially you have exactly the same styles but rather than separating blockquote > p:before
and blockquote > p:after
with a comma? So…
&:before {
background: url(../img/content/quote-open.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;
}
&:after {
background: url(../img/content/quote-close.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;
}
Instead of;
&:before,
&:after {
background: url(../img/content/quote-open.png) no-repeat 0 0;
content: "";
display: inline-block;
height: 24px;
margin: 0 10px 0 -30px;
position: relative;
top: -5px;
width: 21px;
}
&:after {
background: url(../img/content/quote-close.png) no-repeat 0 0;
margin: 5px 0 0 5px;
position: absolute;
top: auto;
}
I think you’re right, actually adding overflow: hidden;
to the <blockquote>
element seems to work as well.