二，前端---僞類與僞元素的用法

時間 2019-11-13

標籤前端元素用法简体版

原文原文鏈接

一：基本用法
　　::before和::after這兩個僞類下有特有的屬性content，用於在CSS渲染中向元素邏輯上的頭部或尾部添加內容。這些內容不會改變文檔的內容，不會出如今DOM中，不可複製，僅僅是在CSS渲染層加入。
　　1：[String] 使用引號包括一段字符串，將會向元素內容中添加字符串，如：a:after{content: ' / '}
　　2：attr() 調用當前元素的屬性，能夠方便的好比將圖片的Alt提示文字或連接的Href地址顯示出來，以下：url

　　a:after {圖片

　　　　content: "(" attr(href) ")";
　　}
　　3：url() / uri() 用於引入媒體文件
　　h1:before{
　　　　content: url(log.png);
　　}
　　4：counter() 調用計數器，能夠不使用列表元素實現序號功能。
　　h2:before{
　　　　counter-increment: chapter;
　　　　content: "Chapter" counter(chapter) ". "
　　}
二：進階技巧
　　1：清除浮動
　　 .clear-fix{
　　　　*overflow: hidden;
　　　　*zoom: 1
　　}
　　.clear-fix:after{
　　　　display: table;
　　　　content: "";
　　　　width: 0;
　　　　clear: both
　　}
三：案例
　　<head lang="en">
　　　　<meta charset="UTF-8">
　　　　<title>僞元素</title>
　　　　<style>
　　　　#show{
　　　　　　background: wheat;
　　　　　　width: 650px;
　　　　　　height: 400px;
　　　　　　margin: 100px auto;
　　　　　　text-align: center;
　　　　}
　　　　p{
　　　　　　position: relative;
　　　　　　display: inline-block;
　　　　　　outline: none;
　　　　　　text-decoration: none;
　　　　　　color: #df5000;
　　　　　　font-size: 90px;
　　　　　　padding: 5px 10px;
　　　　}
　　　　p:hover::before,p:hover::after {
　　　　　　position: absolute;
　　　　}
　　　　p:hover::before {
　　　　　　content: "\5B"; left: -20px;
　　　　}
　　　　p:hover::after {
　　　　　　content: "\5D"; right: -20px;
　　　　}
　　</style>
　　</head>
　　<body>
　　　　<div id = "show"><p>nnjnmljkljklj</p></div>
　　</body>rem

　　各位***猿能夠經過運行案例代碼來看出效果，若是有不足之處，但願你們指出寶貴經驗，謝謝！！！文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。