css 偽元素 偽類 使用 萬能清除浮動 ..
阿新 • • 發佈:2019-01-02
css 偽元素即插入的虛偽元素 像:before :after 插入元素
css 偽類 就是 操作class 樣式
利用偽元素清除浮動ps 利用偽 元素插入的dom 在dom結構中是看不到的 不過可以在css 中看到
.clearfix::after {
content: ".";
clear: both;
display: block;
overflow: hidden;
font-size: 0;
height : 0;
}
.clearfix {
zoom: 1;
}
利用偽元素插入 圖片
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
background: url(images/quotationmark.png) -3px -3 px #ddd;
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
background: url(images/quotationmark.png) -1px -32px #ddd;
display : block;
height: 25px;
width: 25px;
}