|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
使用偽元素在p或div左邊(border)上加一個(gè)感嘆號警告提示符
作者:admin 時(shí)間:2022-1-25 17:32:39 瀏覽:本文介紹一個(gè)有趣的p或div樣式，其左邊框有一個(gè)感嘆號警告提示符，整個(gè)設(shè)計(jì)是純CSS實(shí)現(xiàn)，并且代碼簡單易懂。
HTML
<p class="tip">
<b>不要在選項(xiàng) property 或回調(diào)上使用箭頭函數(shù)。</b><br>
因?yàn)榧^函數(shù)并沒有 this，this 會(huì)作為變量一直向上級詞法作用域查找，直至找到為止，經(jīng)常導(dǎo)致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯(cuò)誤。
</p>
HTML代碼p標(biāo)簽（或其他標(biāo)簽如div），其class值是tip。
CSS
.tip {
width: 400px;
line-height: 150%;
border-left-color: #f66;
color: #666;
padding: 12px 24px 12px 30px;
margin: 2em 1em;
border-left-width: 4px;
border-left-style: solid;
background-color: #f8f8f8;
position: relative;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
.tip::before {
content: "!";
background-color: #f66;
position: absolute;
top: 14px;
left: -12px;
color: #fff;
width: 20px;
height: 20px;
border-radius: 100%;
text-align: center;
line-height: 20px;
font-weight: bold;
font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
}.tip類屬性設(shè)置p標(biāo)簽的長寬、背景顏色、字體顏色、邊框?qū)挾燃邦伾葮邮健?/p>
.tip::before是設(shè)計(jì)感嘆號警告提示符號的樣式。content: "!";提示符內(nèi)容是個(gè)感嘆號。background-color: #f66;是感嘆號背景顏色。color: #fff;是感嘆號顏色。
了解::before偽元素
css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號寫法。
常見偽類——:hover，:link，:active，:target，:not()，:focus。
常見偽元素——::first-letter，::first-line，::before，::after，::selection。
::before和::after下特有的content，用于在css渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。
這些添加不會(huì)出現(xiàn)在DOM中，不會(huì)改變文檔內(nèi)容，不可復(fù)制，僅僅是在css渲染層加入。
所以不要用:before或:after展示有實(shí)際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標(biāo)。
舉例：網(wǎng)站有些聯(lián)系電話，希望在它們前加一個(gè)icon?，就可以使用:before偽元素，如下：
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
.num::before {
content:'\260E';
font-size: 15px;
}
</style>
<p class="num">12345645654</p>
::before和::after必須配合content屬性來使用，content用來定義插入的內(nèi)容，content必須有值，至少是空。默認(rèn)情況下，偽類元素的display是默認(rèn)值inline，可以通過設(shè)置display:block來改變其顯示。
您可能對以下文章也感興趣
- 站長推薦
