在块引用的左侧插入文本

Question

我正在关注 this answer 在我的表单中的两个字段之前插入一个大括号（链接中有一个 jsfiddle）：

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

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

也许解决方案是根本不使用<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

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