Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using ::before ::after we can actually create and manipulate elements in the DOM that do not impact the content. While ::first-letter ::first-line ::selection ::placeholder allow us to target elements that do not have a specific DOM element.

 About 'blockquote':

blockquote {
quotes: "“" "”" "‘" "’";
} blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}

About ::first-line, ::first-letter:

p::first-line {
color: green;
} p::first-letter {
font-size: 2em;
float: left;
line-height: 1.7em;
padding: 0 .3em;
font-weight: bold;
}
<div style="width:350px; margin: 0 auto; padding-top: 80px; padding-bottom: 80px;"> 

    <div class="testimonial-quote ">
<div class="quote-container">
<blockquote>
<p>Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team. Overall, fantastic! </p>
</blockquote>
<cite><span>Kristi Bruno</span></cite>
</div>
</div> </div> .testimonial-quote {
font-size: 14px;
} .testimonial-quote blockquote {
/* Negate theme styles */
border: 0;
margin: 0;
padding: 0; background: none;
color: gray;
font-family: Georgia, serif;
font-size: 1.25em;
font-style: italic;
line-height: 1.4 !important;
margin: 0;
position: relative;
text-shadow: 0 1px white;
z-index: 600;
} .testimonial-quote blockquote * {
box-sizing: border-box;
} .testimonial-quote blockquote p {
color: #75808a;
line-height: 1.2 !important;
} .testimonial-quote blockquote p:first-child:before {
content: '\201C';
color: #81bedb;
font-size: 6em;
font-weight: 700;
opacity: .3;
position: absolute;
top: -.4em;
left: -.2em;
text-shadow: none;
z-index: -300;
} .testimonial-quote cite {
color: gray;
display: block;
font-size: .8em;
} .testimonial-quote cite span {
color: #5e5e5e;
font-size: 1em;
font-style: normal;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 0 1px white;
} .testimonial-quote {
position: relative;
} .testimonial-quote cite {
text-align: right;
}
img {
background-color: red;
}

[CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)的更多相关文章

  1. [TypeStyle] Style CSS pseudo elements with TypeStyle

    Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special ...

  2. CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  3. CSS3 target伪类简介

    CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...

  4. CSS3 :target伪类的理解与使用

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...

  5. 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  6. target属性用于返回最初触发事件的DOM元素。

    target属性用于返回最初触发事件的DOM元素. 在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p& ...

  7. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  8. CSS3 :target伪类实现Tab切换效果 BY commy

    http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...

  9. css3 - target

    通过CSS3伪元素target,我们可以实现拉风琴 源码 <!DOCTYPE HTML> <html lang="en-US"> <head> ...

随机推荐

  1. 力扣题目汇总(反转字符串中的单词,EXCEL表列序号,旋置矩阵)

    反转字符串中的单词 III 1.题目描述 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序. 示例 1: 输入: "Let's take LeetCode ...

  2. python爬虫基础01-HTTP协议

    深入浅出了解HTTP协议 HTTP(HyperText Transfer Protocol,超文本传输协议)是互联网上应用最为广泛的一种网络协议.目前使用最普遍的一个版本是HTTP 1.1. HTTP ...

  3. LeetCode(91) Decode Ways

    题目 A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A ...

  4. PAT Basic 1051

    1051 复数乘法 复数可以写成 (A+Bi) 的常规形式,其中 A 是实部,B 是虚部,i 是虚数单位,满足 i​2​​=−1:也可以写成极坐标下的指数形式 (R×e​(Pi)​​),其中 R 是复 ...

  5. loj2274 「JXOI2017」加法

    二分一下,然后从左到右扫描,扫到左端点就把区间 push 到堆里. 每次有点不符合二分的值时,就贪心地选择右端点最远的 add. #include <algorithm> #include ...

  6. C/C++复杂类型声明

    曾经碰到过让你迷惑不解.类似于int * (* (*fp1) (int) ) [10];这样的变量声明吗?本文将由易到难,一步一步教会你如何理解这种复杂的C/C++声明.   我们将从每天都能碰到的较 ...

  7. Leetcode 322.零钱兑换

    零钱兑换 给定不同面额的硬币 coins 和一个总金额 amount.编写一个函数来计算可以凑成总金额所需的最少的硬币个数.如果没有任何一种硬币组合能组成总金额,返回 -1. 示例 1: 输入: co ...

  8. 紫书第五章训练3 D - Throwing cards away I

    D - Throwing cards away I Given is an ordered deck of n cards numbered 1 to n with card 1 at the top ...

  9. BZOJ 3926 [Zjoi2015]诸神眷顾的幻想乡 ——广义后缀自动机

    神奇的性质,叶子节点不超过20个. 然后把这些节点提出来构成一颗新树,那么这些树恰好包含了所有的情况. 所以直接广义后缀自动机. 然后统计本质不同的字符串就很简单显然了. #include <c ...

  10. SPOJ GSS4 Can you answer these queries IV ——树状数组 并查集

    [题目分析] 区间开方+区间求和. 由于区间开方次数较少,直接并查集维护下一个不是1的数的位置,然后暴力修改,树状数组求和即可. 这不是BZOJ上上帝造题7分钟嘛 [代码] #include < ...