Insert text to the left of a blockquote

Question

I'm following this answer to insert a curly bracket before two fields in my form (there's a jsfiddle in the link):

The red * means that field is required. But actually, the user could supply one OR the other, so the proper representation would be:

But since the { comes from a <blockquote> tag, I don't know how to add the * there, to the left of the picture (unless it's part of the picture, but that's a sub-optimal solution, because in different computers the font will be different). The fields are part of a definition list, with the label in the <dt> and the input in the <dd> part.

Perhaps the solution is not to use a <blockquote> at all?

Answer 1

Like Daniel suggested the :before pseudo element is our friend here. But he did not bother to move the asterisk down to the middle. In my example, it is not perfectly vertically aligned, but I believe this is due to the curly brace image used.

CSS:

blockquote {
    border-style:solid;
    border-width:1px 0 1px 20px;
    border-image:url(http://opbokken.nu/meuk/curly.png) 1 20 stretch;
    padding-left:0.5em;
    position: relative;
}

blockquote:before {
  content: "*";
  color: red;
  margin-left: calc((30px + 0.5em) * -1);
  top: 50%;
  position: absolute;
}

Demo: http://jsfiddle.net/hopkins_matt/xc59ejrj/

The correct top for the above example would be top: calc(50% - 5px);

Answer 2

If you use the :before pseudo-selector, you can add content before the start of the blockquote. Got the base code from the example you refered to.

CSS

blockquote {
    border-style:solid;
    border-width:1px 0 1px 20px;
    border-image:url(http://opbokken.nu/meuk/curly.png) 1 20 stretch;
    padding-left:0.5em;
}

blockquote:before {
  content: '*';
  color: red;
  margin: -50px;
}

HTML

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si longus, levis. Aliter autem vobis placet. Confecta res esset. Cyrenaici quidem non recusant; Duo Reges: constructio interrete. Tum mihi Piso: Quid ergo? </p>

<p>Ut aliquid scire se gaudeant? Eadem fortitudinis ratio reperietur. </p>

<p>Huius ego nunc auctoritatem sequens idem faciam. Sed plane dicit quod intellegit. Nulla erit controversia. Ad eas enim res ab Epicuro praecepta dantur. </p>
</blockquote>

Working jsfiddle: http://jsfiddle.net/5tCrE/57/