在blockquote

Question

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

红色*表示该字段是必需的。但实际上，用户可以提供一个或另一个，因此正确的表示将是：

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

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

Answer 1

如果您使用import groovy.util.logging.Log4j2 @Log4j2 class TestLog4j2 { public static void log(String message) { log.error(message) 伪选择器，则可以在:before开始之前添加内容。从你提到的例子中得到基本代码。

CSS

blockquote

HTML

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

工作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);