@rat_fucker

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

Пытаюсь добавить в цитату кавычку.
5f42962cefe77722296890.png
Пишу следующий код:
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%. Разве он не должен находится на середине рамки?
  • Вопрос задан
  • 119 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. Смотрите, работает https://jsfiddle.net/L59cqhft/
Значит, с вашим кодом где-то по дороге происходят какие-то преобразования.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы