在块引用的左侧插入文本

Question

我按照 this answer 在我的表单中的两个字段前插入大括号（link 中有一个 jsfiddle）：

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

但是由于 { 来自 <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

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

在块引用的左侧插入文本

Insert text to the left of a blockquote

html

css

blockquote