Почему добавляется второй слэш в content?

Question

[rat_fucker]

Пытаюсь добавить в цитату кавычку.

Пишу следующий код:

blockquote {
    font-style: italic;
margin: 0 3rem 1rem;
border-left: 4px solid red;
  z-index: 0
}

blockquote:before{
    content: "";
    position: absolute;
   top: 50%;
    left: 5.2%;
    height: 2em;
    background-color: white;
    width: 5px;
   }

blockquote:after{
    content: '\201D';
    position: absolute;
    top: 50%;
    left: 5%;
    color: red;
    font-style: normal;
    line-height: 1em;
    text-align: center;
    text-indent: -2px;
    font-size: 32px;
    font-family: "Ionicons";
    font-weight: bold;}

Однако на сайте отображается "\201D" вместо спецсмвола. Заглянув в консоль разработчика, я увидел, что у спецсимвола появился второй слэш: content: '\\201D'. Из-за чего так происходит?

Также почему :before сполз вниз, хотя стоит top: 50%. Разве он не должен находится на середине рамки?

Comments

[Ivan Bogachev]

Перед попаданием на сайт ваш код проходит какие-то еще процедуры? Используете ли вы пре/пост-процессоры? Может быть ваша CMS что-то делает с кодом?

[Spartak (Web-StyleStudio)]

Какая-то из функций в вашем скрипте экранирует спец символы

Answer 1

[Ankhena]

1. Смотрите, работает https://jsfiddle.net/L59cqhft/
Значит, с вашим кодом где-то по дороге происходят какие-то преобразования.

2.

Также почему :before сполз вниз, хотя стоит top: 50%. Разве он не должен находится на середине рамки?

Абсолют позиционируется относительно ближайшего родителя с position: relative, а при его отсутствии относительно окна браузера.
Зададите для blockquote relative, будет позиционироваться относительно него.