How to style blockquote + cite to look like form fieldset + legend? - html

Question

I am trying to style a blockquote and child cite elements to replicate the appearance of a fieldset and legend element, where there is a border around the fieldset, and the legend label is inset in the top of the border -- if you've seen a fieldset you'll know what I mean.
I have a solution in which I give the cite a background-color, but this will only work when placed on a similar colored background. I need a solution that will work on all backgrounds, bg images, etc. in IE8+
Assume the following markup (cannot be changed from this. no additional elements allowed):
<blockquote class="quote">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi
facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam
delectus. Reiciendis repellat illo, et natus earum odit!
<cite class="attribution">Mr. Jefferson</cite>
</blockquote>
CSS I have so far:
.quote {
border: 4px solid black;
padding: 1rem;
position: relative;
}
.attribution {
position: absolute;
top: 0;
left: 1rem;
margin-top: -0.65rem;
padding: 0 1rem;
background: white; /* this works, but breaks if the background isn't white. I need a solution that works for all possible page bg colors */
}
This is what I have so far: http://jsbin.com/viqegerivi/edit?html,css,output

Answer 1

I have to admit, I enjoyed this one. Used absolutely positioned :befores and :afters, didn't touch your HTML markup but, as expected, went wild on CSS. Cheers!
fieldset {
border: 4px solid black;
padding: 1rem 2rem;
}
legend {
font-style: italic;
padding: 0 1rem;
}
.quote {
border-bottom: 4px solid black;
padding: 2.6rem calc(2rem + 6px) 1rem;
position: relative;
overflow: hidden;
margin: 0;
}
.quote:before,
.quote:after {
content: ' ';
position: absolute;
width: 4px;
height: 100%;
background-color: black;
bottom: 0;
top: 1rem;
}
.quote:after {
left: 0;
}
.quote:before {
right: 0;
}
.attribution {
position: absolute;
top: 0;
left: 0;
margin-left: 2.4rem;
margin-top: .35rem;
padding: 0 1rem;
background: transparent;
}
.attribution:before,
.attribution:after {
position: absolute;
content: ' ';
bottom: calc(50% - 1px);
height: 4px;
background-color: black;
width: 100vw;
}
.attribution:before {
right: 100%;
}
.attribution:after {
left: 100%;
}
<p>Desired Look:</p>
<fieldset>
<legend>Mr. Jefferson</legend>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit!
</fieldset>
<p>What I currently have:</p>
<blockquote class="quote">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit!
<cite class="attribution">Mr. Jefferson</cite>
</blockquote>
EDIT: As Mr Lister spotted, there is a differece between this and the fieldbox title model: the background of the blockquote runs above (what looks like) top border.
I personally don't consider it a significant problem as
it can be easily overcome by adding an extra wrapper for background-clipping, so it's achievable, but requires a slightly more complex markup.
I don't think many will use this model with a background color that is different from that of the page. My personal oppinion is that this model looks best when used with transparent background (that's why we interrupt the line, right?).
Also, the intial challenge I set for myself was to achieve the effect without touching the markup.

Answer 2

I tried this out, works well:
html {background:blue}
fieldset {
border: 4px solid black;
padding: 1rem 2rem;
}
legend {
font-style: italic;
padding: 0 1rem;
}
.quote {
border: 4px solid black;
padding: 1rem;
width:auto;
margin:0;
position: relative;
}
.attribution {
position: absolute;
top: 0;
left: 1rem;
margin-top: -0.65rem;
padding: 0 1rem;
background:blue
}