Question

我正在尝试制作一个在错误引用的单词后添加[ sic ]的元素。

使用SCSS，这是我到目前为止：

span {
    &.sic {
        &:after {
            content: "[""]"
        }
    }
}

我只是不知道如何保留括号的方式，并在它们之间用斜体添加“sic”。

Answer 1

如果您真的想要使用常规括号并且sic为斜体，我可以想到最好的是使用括号定义content以及等斜体字符，所以类似的东西：

span {
  &.sic {
    &:after {
        content: "[]";
    }
  }
}

但我认为使用unicode字符会更好：

content: "\005B\1D460\1D456\1D450\005D";

span:after {
    content: "\005B\1D460\1D456\1D450\005D";
}

<span>some text</span>

否则你必须使用所有斜体：

&:after {
    content: "[sic]";
    font-style: italic;
}

或者没有斜体：

&:after {
    content: "[sic]";
}

Answer 2

您可以使用边框和渐变来创建括号，只能使文本为斜体或更改任何其他属性而不影响括号：

p:after {
  content:"Sic";
  font-style:italic;
  color:red;
  display:inline-block;
  margin:0 5px;
  padding:0 2px;
  border-right:1px solid #000;
  border-left:1px solid #000;
  background-image:
  linear-gradient(#000 0,#000 1px,transparent 1px),
  linear-gradient(#000 0,#000 1px,transparent 1px),
  linear-gradient(to top,#000 0,#000 1px,transparent 1px),
  linear-gradient(to top,#000 0,#000 1px,transparent 1px)  ;
  background-position:0 0, 100% 0;
  background-size:3px 100%;
  background-repeat:no-repeat;
}

<p>Lorem ipsum</p>

<强>更新

另一个渐变少，代码少的版本：

p:after {
  content:"Sic";
  font-style:italic;
  color:red;
  display:inline-block;
  margin:0 5px;
  padding:0 2px;
  border-right:1px solid #000;
  border-left:1px solid #000;
  --g:linear-gradient(#000 0,#000 1px,transparent 1px,transparent calc(100% - 1px),#000 calc(100% - 1px));
  background: var(--g) left,var(--g) right;
  background-size:3px 100%;
  background-repeat:no-repeat;
}

<p>Lorem ipsum</p>

您还可以考虑使用更多CSS变量来轻松调整所需的值：

:root {
  --b:1px;
  --c:#000;
}

p:after {
  content:"Sic";
  font-style:italic;
  color:red;
  display:inline-block;
  margin:0 5px;
  padding:0 2px;
  border-right:var(--b) solid var(--c);
  border-left:var(--b) solid var(--c);
  --g:linear-gradient(var(--c) 0,var(--c) var(--b),transparent var(--b),transparent calc(100% - var(--b)),var(--c) calc(100% - var(--b)));
  background: var(--g) left,var(--g) right;
  background-size:3px 100%;
  background-repeat:no-repeat;
}

<p>Lorem ipsum</p>
<p style="--b:2px;--c:blue">Lorem ipsum</p>
<p style="--b:3px;--c:purple">Lorem ipsum</p>

Answer 3

你几乎不能在任何代码语言中使用这样的引号，css也不例外。您需要分别使用单引号和双引号。

span {
    &.sic {
        &:after {
            content: "sic"
        }
    }
}

或者如果你只想要单词

{{1}}

如何混合样式：{content：

3 个答案: