Как смешать стили в :after { content:

avatar
Angeliss44
7 апреля 2018 в 22:24
44
3
4

Я пытаюсь создать элемент, который будет добавлять [sic] после неправильно процитированного слова.

Используя SCSS, вот что у меня есть:

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

Я просто не знаю, как оставить скобки такими, какие они есть, и добавить "sic" курсивом между ними.

Источник

Ответы (3)

avatar
DarkAjax
7 апреля 2018 в 22:46
3

Лучшее, что я могу придумать, если вы действительно хотите иметь обычные скобки и sic курсивом, это определить content с вашими скобками вместе с курсивными символами, такими как ????????????, так что-то вроде:

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

Но я думаю, что было бы лучше использовать символы Юникода, например:

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]";
}
Angeliss44
7 апреля 2018 в 23:59
0

Спасибо @DarkAjax! Юникод — самый простой способ. Я ценю помощь.

avatar
Kankuro
7 апреля 2018 в 22:38
-1

Такие кавычки нельзя использовать практически ни в одном языке кодирования, css не является исключением. Вам нужно использовать одинарную и двойную кавычки соответственно.

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

Или, если вам нужно просто слово

span {
    &.sic {
        &:after {
            content: "sic"
        }
    }
}
avatar
Temani Afif
7 апреля 2018 в 22:37
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>