免費贈送的DOM-僞元素

時間 2019-11-06

標籤免費贈送 dom 元素欄目 HTML 简体版

原文原文鏈接

Gif高清原圖地址: user-images.githubusercontent.com/15868458/64…

底部色塊覆蓋文字在線地址: https://zhaoolee.com/ProgrammingWithChrome/bottom_color_block_cover_font/

源碼:css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>底部色塊覆蓋文字</title>
</head>
<body>
    <span class="bottom_color_block_cover_font">天 是 方 的 地 是 圓 的</span>

    <style> body{ height: 80vh; display: flex; justify-content: center; align-items: center; } .bottom_color_block_cover_font{ display: inline-block; padding: 10px; position: relative; color: #020002; z-index: 1; font-size: 30px; } /*鼠標浮動到文字上方變成小手*/ .bottom_color_block_cover_font:hover{ cursor: pointer; } .bottom_color_block_cover_font::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 6px; background-color: #BE9F6A; transform-origin: bottom; transition: all 0.2s ease-in-out; } .bottom_color_block_cover_font:hover::after{ z-index: -1; height: 100%; background-color: #BE9F6A; } </style>



</body>
</html>
複製代碼

上圖中文字的底部色塊就是用僞元素添加的html

關於僞元素

僞元素就像某寶/某多多商品大促銷免費贈送的DOM元素。它能夠被添加與DOM元素相關的屬性, 但不會在HTML中展現出來

因爲僞元素不在正式的文檔流當中,因此上圖網頁中的《和》沒法被鼠標拖拽選中git

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加僞元素</title>
</head>
<body>
    <div class="title">用Chrome學編程</div>
    <style> .title::before{ content: "《" } .title::after{ content: "》"; } </style>
</body>
</html>
複製代碼

善用before 、after兩個僞元素。一個標籤能夠當3個標籤來使用, 配合css, 讓單標籤動畫成爲了可能~

Gif高清原圖地址: user-images.githubusercontent.com/15868458/64…

爲字體添加劃線在線查看地址: https://zhaoolee.com/ProgrammingWithChrome/font_line/github

源碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爲字體添加劃線</title>
</head>
<body>

        <div class="atom">
            <span class="font_line_en">Hello world</span>
        </div>
        <div class="atom">
            <span class="font_line_cn">你 好<br/>世 界</span>
        </div>

    <style> body{ height: 80vh; display: flex; justify-content: center; align-items: center; } .atom{ flex: 1 1 auto; display: flex; justify-content: center; align-items: center; } .atom span{ } .font_line_cn{ writing-mode: vertical-rl; font-size: 60px; color: #BE9F6A; position: relative; } /*浮動上方須要顯示小手*/ .font_line_cn:hover{ cursor: pointer; } /*爲文字內容先後 添加僞元素*/ .font_line_cn::before, .font_line_cn::after{ content: ""; /*經過absolute定位, left:0 right:0 讓元素寬度與文章內容寬度相同*/ position: absolute; top: 0; bottom: 0; /*設置元素高度爲2px*/ width: 4px; /*設置元素背景色爲#111111*/ background-color: #BE9F6A; /*transform屬性容許你旋轉，縮放，傾斜或平移給定元素 這裏經過設置scaleX(0) 把橫線隱藏*/ transform: scaleY(0); /* 過渡屬性的名稱 持續時間 緩動函數 */ transition: transform 0.2s ease-in-out; } /*添加到文字元素 前面的僞元素 top爲0 轉換原點在右側(以下圖) */ .font_line_cn::before{ left: 0; transform-origin: top left; } .font_line_cn::after{ right: 0; transform-origin: bottom right; } .font_line_cn:hover::before{ transform-origin: top right; transform: scaleY(1); } .font_line_cn:hover::after{ transform-origin: bottom left; transform: scaleY(1); } /* 英文*/ .font_line_en{ font-size: 60px; color: #111111; position: relative; } /*浮動上方須要顯示小手*/ .font_line_en:hover{ cursor: pointer; } /*爲文字內容先後 添加僞元素*/ .font_line_en::before, .font_line_en::after{ content: ""; /*經過absolute定位, left:0 right:0 讓元素寬度與文章內容寬度相同*/ position: absolute; left: 0; right: 0; /*設置元素高度爲2px*/ height: 4px; /*設置元素背景色爲#111111*/ background-color: #111111; /*transform屬性容許你旋轉，縮放，傾斜或平移給定元素 這裏經過設置scaleX(0) 把橫線隱藏*/ transform: scaleX(0); /* 過渡屬性的名稱 持續時間 緩動函數 */ transition: transform 0.2s ease-in-out; } /*添加到文字元素 前面的僞元素 top爲0 轉換原點在右側(以下圖) */ .font_line_en::before{ top: 0; transform-origin: left top; } .font_line_en::after{ bottom: 0; transform-origin: right bottom ; } .font_line_en:hover::before{ transform-origin: right bottom; transform: scaleX(1); } .font_line_en:hover::after{ transform-origin: left bottom; transform: scaleX(1); } </style>
</body>
</html>
複製代碼

完整程序已經上傳到github, 下載地址以下:

github.com/zhaoolee/Pr…編程

編程小知識

僞元素雖然很是有用,但有一些特定的標籤是不支持僞元素 before 和 after 的, 好比常見的<img> 、<input>、<iframe> 都不支持僞元素; 爲啥不支持? 標籤要想支持僞元素,就須要這個標籤必須容許插入其它元素, 但 <img> 、<input>、<iframe>這三位大佬都不容許插入其它元素(好比<img><span>歐拉歐拉</span></img>的寫法是不符合語法的), 因此不容許插入其它元素的DOM元素,都不支持僞元素; MDN的專業解釋連接