偽元素學習包含::before、::after的用法
阿新 • • 發佈：2019-02-07
<!-- 偽元素的學習(偽類元素就是頁面程式碼不會出現偽類元素)
1、::before before和after主要是配合content屬性使用的
2、::after
3、css content樣式 content用來定義插入內容必須有值至少是空
預設情況下偽元素的display的預設值是inline
可以通過設定display:block來改變其顯示。
通過attr()呼叫當前元素的屬性
通過url()引用媒體檔案。
-->
<!DOCTYPE html>
<html>
<head>
<title>偽元素的用法</title>
<style type="text/css">
a{
text-decoration: none;
}
a::before{/*content必須配合url()的使用*/
content: url(image/hao123.png);
}
a::after{
content: url(href);
margin: 20px;
}
.bigbox{
width: 312px;
height: 72px;
}
.touxiang{
width: 70px;
height: 72px;
border-radius: 50%;/*每個角都是圓角*/
overflow: hidden;/*溢位隱藏*/
background:url(image/picture1.png) no-repeat -24px -10px;/*負號是向左移的意思*/
border:1px solid #000000;
display: inline-block;/*修改影象的性質*/
}
.liaotiankuang{
width: 234px;
height: 60px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 10px 10px 10px 0;/*圓角*/
float: right;/*向右浮動和圖片在一行上*/
/*不過遇到塊級元素一佔就佔一整行*/
margin-top: 12px;/*72-60*/
position: relative;/*相對定位*/
}
.liaotiankuang::before{
content: url(image/picture2.png);
position: absolute;/*絕對定位*/
left:-28px;
top: 23px;
}
</style>
</head>
<body>
<a href="https://www.hao123.com/">hao123</a>
<div class="bigbox">
<div class="touxiang"></div>
<div class="liaotiankuang"></div>
</div>
</body>
</html>
1、::before before和after主要是配合content屬性使用的
2、::after
3、css content樣式 content用來定義插入內容必須有值至少是空
預設情況下偽元素的display的預設值是inline
可以通過設定display:block來改變其顯示。
通過attr()呼叫當前元素的屬性
通過url()引用媒體檔案。
-->
<!DOCTYPE html>
<html>
<head>
<title>偽元素的用法</title>
<style type="text/css">
a{
text-decoration: none;
}
a::before{/*content必須配合url()的使用*/
content: url(image/hao123.png);
}
a::after{
content: url(href);
margin: 20px;
}
.bigbox{
width: 312px;
height: 72px;
}
.touxiang{
width: 70px;
height: 72px;
border-radius: 50%;/*每個角都是圓角*/
overflow: hidden;/*溢位隱藏*/
background:url(image/picture1.png) no-repeat -24px -10px;/*負號是向左移的意思*/
border:1px solid #000000;
display: inline-block;/*修改影象的性質*/
}
.liaotiankuang{
width: 234px;
height: 60px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 10px 10px 10px 0;/*圓角*/
float: right;/*向右浮動和圖片在一行上*/
/*不過遇到塊級元素一佔就佔一整行*/
margin-top: 12px;/*72-60*/
position: relative;/*相對定位*/
}
.liaotiankuang::before{
content: url(image/picture2.png);
position: absolute;/*絕對定位*/
left:-28px;
top: 23px;
}
</style>
</head>
<body>
<a href="https://www.hao123.com/">hao123</a>
<div class="bigbox">
<div class="touxiang"></div>
<div class="liaotiankuang"></div>
</div>
</body>
</html>