在元素的内容上应用CSS规则之前和之后

Question

我有以下代码

class MainWindow
{
 // ...
  CameraView m_camera_view;
};

void MainWindow::on_pushButton_clicked()
{
  QImage RIImg("/root/Desktop/label.jpg");
  CameraView m_camera_view(RIImg);
  Show(m_camera_view.GetView(), ui->NormalImg);///
}

我想在以下部分添加开始和结束语：

<div class="testimonial_description_inner" style="width: 640px;"> We can’t solve problems by using the same kind of thinking we used when we created them. <strong class="testimonial_author">- Einstein</strong> <p class="testimonial_meta"></p> </div>

当我像这样使用它时：

We can’t solve problems by using the same kind of thinking we used when we created them.

收尾报价位于整个.testimonial_description_inner:before { content: "\201C"; font-size: 40px; font-family: Georgia, serif; } .testimonial_description_inner:after { content: "\201C"; font-size: 40px; font-family: Georgia, serif; } 的末尾。如何在不更改HTML代码的情况下仅选择内部部分来应用CSS规则？

Answer 1

您可以在before上将结束引用添加为.testimonial_author伪元素。

我已使用display: inline-block将其与前面的文字对齐，但float: right也可能有用...

.testimonial_description_inner:before {
  content: "\201C";
  font-size: 40px;
  font-family: Georgia, serif;
}

.testimonial_author:before {
  content: "\201C";
  font-size: 40px;
  font-family: Georgia, serif;
  display: inline-block;
}

<div class="testimonial_description_inner" style="width: 640px;">
  We can’t solve problems by using the same kind of thinking we used when we created them.
  <strong class="testimonial_author">- Einstein</strong>
  <p class="testimonial_meta"></p>
</div>