Search code examples
htmlcssblockquote

Insert text to the left of a blockquote

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

two fields with * in the wrong place

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

two fields with * in the right place

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?

Solution

  • 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);