Вставьте текст слева от цитаты

Question

Я следую этому ответу, чтобы вставить фигурную скобку перед двумя полями в моей форме (в ссылке есть jsfiddle):

Красный * означает, что это поле обязательно для заполнения. Но на самом деле пользователь может предоставить одно ИЛИ другое, поэтому правильное представление будет таким:

Но так как {происходит от <blockquote> тег, я не знаю, как добавить * там, слева от изображения (если это не часть изображения, но это неоптимальное решение, потому что на разных компьютерах шрифт будет разным). Поля являются частью списка определений, с меткой в <dt> и вход в <dd> часть.

Возможно, решение не в том, чтобы использовать <blockquote> совсем?

Answer 1

Как Даниил предложил :before псевдоэлемент наш друг здесь. Но он не стал сдвигать звездочку до середины. В моем примере он не идеально выровнен по вертикали, но я считаю, что это связано с использованием фигурных скобок.

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;
}

Демо: http://jsfiddle.net/hopkins_matt/xc59ejrj/

Правильный top для приведенного выше примера будет top: calc(50% - 5px);

Answer 2

Если вы используете :before псевдо-селектор, вы можете добавить контент до начала blockquote, Получил базовый код из примера, на который вы ссылались.

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>

Работающий jsfiddle: http://jsfiddle.net/5tCrE/57/