html - 在块引用的左侧插入文本

Question

我正在按照这个答案在我的表单中的两个字段之前插入一个大括号（链接中有一个 jsfiddle）：

红色 * 表示该字段为必填项。但实际上，用户可以提供一个或另一个，所以正确的表示是：

但由于 { 来自<blockquote>标签，我不知道如何在图片左侧添加 * （除非它是图片的一部分，但这是一个次优解决方案，因为在不同的计算机中字体会不同）。这些字段是定义列表的一部分，标签在 中<dt>，输入在<dd>部分中。

也许解决方案是根本不使用 a <blockquote>？

Answer 1

如果使用: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/

Answer 2

就像丹尼尔建议的那样，: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);