Я пытаюсь создать элемент, который будет добавлять [sic] после неправильно процитированного слова.
Используя SCSS, вот что у меня есть:
span {
&.sic {
&:after {
content: "[""]"
}
}
}
Я просто не знаю, как оставить скобки такими, какие они есть, и добавить "sic" курсивом между ними.
Лучшее, что я могу придумать, если вы действительно хотите иметь обычные скобки и 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]";
}
Такие кавычки нельзя использовать практически ни в одном языке кодирования, css не является исключением. Вам нужно использовать одинарную и двойную кавычки соответственно.
span {
&.sic {
&:after {
content: '["sic"]'
}
}
}
Или, если вам нужно просто слово
span {
&.sic {
&:after {
content: "sic"
}
}
}
Вы можете использовать границу и градиент для создания скобок, и вы можете выделить только текст курсивом или изменить любое другое свойство, не затрагивая скобки:
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>
Спасибо @DarkAjax! Юникод — самый простой способ. Я ценю помощь.