Цитата из псевдоэлемента CSS

#html #css #css-position #pseudo-element

#HTML #css #css-позиция #псевдоэлемент

Вопрос:

Мне нужна некоторая помощь…

Я пытаюсь создать стиль элемента blockquote:

 <div class="container-fluid testimonials padding">
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-5 col-md-offset-2 col-lg-5 col-lg-offset-2">
            <blockquote>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vul. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vul.
            </blockquote>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">

        </div>
    </div>
</div>

Стиль, который я пока:

 .padding {padding-top:2%;padding-bottom:2%;}

blockquote {padding:60px 30px 40px 95px;border:none;position:relative;font-family: 'Comfortaa', cursive;}

blockquote::before{
  content: "201C";
  font-family: 'Comfortaa', cursive;
  font-size: 180px;
  font-weight: bold;
  color: #999;
  position: absolute;
  left:20px;
  top:-40px;
  color:#b80072;
  z-index: -1;
}

blockquote::after{
  content: "201D";
  font-family: 'Comfortaa', cursive;
  font-size: 180px;
  font-weight: bold;
  color: #999;
  position: absolute;
  right:5%;
  bottom:-45%;
  color:#b80072;
  z-index: -1;
  opacity:0.5;
  width:90px;
}

@media (max-width: 510px) {
    blockquote::after {bottom:-25%;}
}

Результат — это почти то, чего я хочу достичь.

Псевдоэлемент before оформлен правильно, и само заполнение blockquote в порядке.

Проблема заключается в стилизации псевдоэлемента after как. Как мне заставить его придерживаться нижнего правого угла элемента blockquote?

Буду признателен за любую помощь.

1. Такого рода вопросы более актуальны для скрипки.

2. верно^ . не могли бы вы более конкретно указать, где вы хотите, чтобы это было?

3.Вы явно расположили его 45% снизу. Если вы хотите, чтобы он был внизу, измените его на 0 .

4. @D.Melo jsfiddle: jsfiddle.net/TDq3a

5. @boris конечная цитата должна быть прозрачной за текстом в правом нижнем углу элемента. Дайте мне знать, если вам нужно больше деталей?

Ответ №1:

Причина, по которой размещение кажется сложным, заключается в огромной высоте строки по умолчанию для кавычек. Вы можете получить немного больше контроля над ним, установив

 blockquote::after {line-height: 0;}

… хотя это не идеальное решение.