標籤:大事記 alt function 新聞 css 沒有 元素 添加 sof
我不知道有沒有小夥伴以前跟我一樣,在一個元素內部想要添加一個小表徵圖或者小東西的時候,
直接在HTML文檔裡自己加上<span>標籤,或者其他的。亦或者用javascript在該元素中追加一個元素.
比如我們向下面這些div中添加b元素;
<div></div>
<div></div>
<div></div>
<div></div>
$(function){
$("div").append("<b>Hello</b>");
}
結果:<div><b>Hello</b>
</div>
<div><b>Hello</b>
</div>
<div><b>Hello</b>
</div>
<div><b>Hello</b>
</div>
而 CSS偽類:before;
div:before{content:"●";width:5px;height:5px;left:169px;top:2px;}
註:content :是一個屬性,值為資訊。(可以為符號,文字);
執行個體:
html:
<div class="left">
<ul>
<li><a href="#">品牌簡介</a></li>
<li><a href="#">品牌結構</a></li>
<li><a href="#">品牌定義</a></li>
<li><a href="#">品牌文化</a></li>
<li><a href="#">新聞動態</a></li>
<li><a href="#">連絡方式</a></li>
<li><a href="#">大事記</a></li>
</ul>
</div>
CSS:
.left{width:175px;}
.left ul{padding-top:20px;border-right:1px dashed #333;}
.left ul li>a{position:relative;display:block;width:175px;text-align:center;font-size:16px;line-height:45px;}
.left ul li>a:hover:before{position:absolute;content:"●";width:5px;height:5px;left:169px;top:2px;}
.left ul li>a:hover{color:red;}
結果:
經過出現小圓點,並且和文字一樣,直接設定顏色!
今天做項目用了CSS偽類別選取器“before”,就來瞭解瞭解它怎麼使用,又如何用?