[CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)
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.
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)的更多相关文章
- [TypeStyle] Style CSS pseudo elements with TypeStyle
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special ...
- CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)
是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...
- CSS3 target伪类简介
CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...
- CSS3 :target伪类的理解与使用
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- target属性用于返回最初触发事件的DOM元素。
target属性用于返回最初触发事件的DOM元素. 在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p& ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- CSS3 :target伪类实现Tab切换效果 BY commy
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...
- css3 - target
通过CSS3伪元素target,我们可以实现拉风琴 源码 <!DOCTYPE HTML> <html lang="en-US"> <head> ...
随机推荐
- SpringMVC里静态网页不能加载到.js .css文件的问题
在写SpringMVC项目时候,写的js css文件打不开,网上查了一下,解决办法: 在web.xml里面: <servlet> <servlet-name>dispatche ...
- LeetCode(153) Find Minimum in Rotated Sorted Array
题目 Total Accepted: 65121 Total Submissions: 190974 Difficulty: Medium Suppose a sorted array is rota ...
- SQLServer数据库查看死锁、堵塞情况
在压力测试过程中,不间断的按F5键执行上面的SQL语句,如果出现死锁或者堵塞现象,就会在执行结果中罗列出来.如果每次连续执行SQL,都有死锁或者堵塞出现,说明死锁或者堵塞的比较严重. --每秒死锁数量 ...
- Android AAR 混淆的坑
一定不要忘记加上这段 -keepattributes Exceptions,InnerClasses,Signature,Deprecated,SourceFile,LineNumberTable,A ...
- How To Configure VMware fencing using fence
本文主要简单介绍一下如何在RHEL 7 Pacemaker中配置一个fence_vmware_soap类型的STONITH设备(仅供测试学习). STONITH是Shoot-The-Other-Nod ...
- python 配置opencv-python 接口
anaconda2下配置opencv-python 接口,import cv2遇到no cv2 模块问题,解决办法是将cv2.so放到anaconda2/lib/python2.7/site-pack ...
- 【UML】UML图的发展和体系结构
导读:上次给徒弟验收UML的项目,在验收的时候提出了很多问题,徒弟也暴露了一些问题.说好我们一起总结成长的,由于最近的事儿,比较忙,所以现在进行总结.上次会议中说到要用门卫思维去总结这部分的知识点,用 ...
- [UOJ#221][BZOJ4652][Noi2016]循环之美
[UOJ#221][BZOJ4652][Noi2016]循环之美 试题描述 牛牛是一个热爱算法设计的高中生.在他设计的算法中,常常会使用带小数的数进行计算.牛牛认为,如果在 k 进制下,一个数的小数部 ...
- 洛谷 [P4151] 最大异或和路径
线性基 首先我们发现,对于一条路径走过去再走回来是没有意义的, 所以我们可以没有任何其他影响的取得一个环的异或和 所以我们预处理出来所有环的异或和,求出他们的线性基,然后任找一条 \(1 \sim n ...
- Java面试题集(六)
以下为框架补充部分: Struts 2中,Action通过什么方式获得用户从页面输入的数据,又是通过什么方式把其自身的数据传给视图的? Action从页面获取数据有三种方式: ①通过Action属性接 ...