How to mix style in: after {content:

Question

I am trying to create an element that will add [sic] after an incorrectly quoted word.

Using SCSS, here is what I still have:

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

I just don’t know how to save the brackets as they are, and add “sic” in italics between them.

Answer 1

The best I can imagine, if you really want the regular brackets to sicbe italicized, define contentwith your brackets along with italics, for example 𝘴𝘪𝘤, so something like:

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

But I think that with Unicode characters would be better:

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

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

<span>some text</span>

Run code

Otherwise, you have to go with all italics:

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

Or no italics:

&: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>

UPDATE

:

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

You cannot use quotes like this in almost any code language, css is no exception. You need to use one quote and double quote, respectively.

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

Or if you want just a word

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