代码之家 › 专栏 › 技术社区 › PrismaPixel Studios

如何在{内容:

pseudo-element css

PrismaPixel Studios · 技术社区 · 8 年前

我正在尝试创建一个元素[ 碳化硅 ]在错误引用的单词之后。

使用SCSS,以下是我目前所掌握的:

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

我只是不知道如何保持括号的原样,并在括号之间加上斜体字“sic”。

3 回复 | 直到 8 年前

DarkAjax 8 年前

如果你真的想用普通括号和 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]";
}

Temani Afif 8 年前

可以使用边框和渐变创建括号,并且可以仅将文本设置为斜体或更改任何其他属性,而不影响括号:

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>

-1

Kankuro 8 年前

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

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

或者如果你只是想知道

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前