<div>標簽與before,after偽元素生成加號

劉德剛發(fā)布于2019-08-01 14:44 / 1868人閱讀

摘要：偽元素在元素之前添加內(nèi)容。注意及以前的使用方法是，規(guī)定的是，為防止兼容性的問題，建議使用。該偽元素針對行內(nèi)元素。以為例，添加的內(nèi)容也是在中。

before 偽元素在元素之前添加內(nèi)容。

::after偽元素在元素之后添加內(nèi)容。

注意：

CSS2及以前的使用方法是a:before，CSS3規(guī)定的是a::before，為防止兼容性的問題，建議使用a::before。

該偽元素針對行內(nèi)元素。以a:before為例，添加的內(nèi)容也是在中。

應用舉例：使用一個

標簽生成一個加號（寬150px，高50px），如圖：

實現(xiàn)思路如下：

首先定義一個中心為頁面中心的150*150的div標簽，然后利用before與after偽元素向div標簽中添加一個橫向與一個縱向的紅色矩形

實現(xiàn)代碼如下：

html:

css:


.jia{

   position:absolute;

   width:150px;              height:150px;

   top:50%;                    left:50%;

   margin-left:-75px;     margin-top:-75px;

  

}

.jia::before,.jia::after{

   position:absolute;

  background-color:red;

  content:""

}

.jia::before{

  width:150px;

  height:50px;

  top:50px;

}

.jia::after{

  width:50px;

  height:150px;

  left:50px;

}

云服務器 GPU云服務器 html5元素與標簽 python &lt&gt java &lt=&gt java&lt &gt

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49563.html

前端知識點總結(jié)——C3

摘要：前端知識點總結(jié)復雜選擇器兄弟選擇器兄弟元素具備相同父元素的平級元素之間稱為兄弟元素。前端知識點總結(jié)——C3 1.復雜選擇器 1.兄弟選擇器兄弟元素：具備相同父元素的平級元素之間稱為兄弟元素。 1.相鄰兄弟選擇器作用：獲取緊緊挨在某元素后的兄弟元素語法：選擇器1+選擇器2{} 注意：兄弟選擇器，只能向后找，不能向前找 2.通用兄弟選擇器作用：獲取...

meislzhua 2019-08-30 14:01 評論0 收藏0
html之css選擇器學習

相關內(nèi)容：什么是css選擇器標簽選擇器類選擇器id選擇器并集選擇器（分組選擇器）交集選擇器后代選擇器子標簽選擇器屬性選擇器相鄰兄弟選擇器偽類選擇器偽元素選擇器（偽對象選擇器）首發(fā)時間：2018-03-02 修改：2018-04-30：修改了排版，增加了偽類選擇器，偽元素選擇器，在原本簡略的介紹的基礎上增加了描述并修改了某些術(shù)語描述。2018-05-05：修改了部分偽類選擇器的注解，由于之前發(fā)生了小...

番茄西紅柿 2019-04-23 13:46 評論0 收藏0
css選擇器和jQuery選擇器

摘要：通用選擇器組合子和否定偽類對特異性沒有影響。選擇器大部分還是和選擇器保持了一致，但是有以下一些部分的改動第一個元素最后一個元素所有偶數(shù)元素，索引值從開始，第一個元素是偶數(shù)，第二個元素是奇數(shù)，以此類推。選擇器在書寫樣式和查找節(jié)點的時候，選擇器是必不可少的，所以了解選擇器的書寫方式和使用就顯得極為重要，本文主要分開講了css選擇器和jQuery選擇器； css選擇器大家都可能知道，在...

niuxiaowei111 2019-08-29 13:10 評論0 收藏0
css

摘要：如內(nèi)可以包含塊級元素與塊級元素并列內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。而對于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。css概念　　CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。css引入方式1. 行內(nèi)式　　行內(nèi)式是在標記的style屬性中設定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢，不推薦使用...

番茄西紅柿 2019-04-23 13:25 評論0 收藏0
Vue編程三部曲之將template編譯成AST示例詳解

　　知道嗎？Vue.js 有 2 個版本，一個是Runtime + Compiler版本，另一個是Runtime only版本。Runtime + Compiler版本是包含編譯代碼的，簡單來說就是Runtime only版本不包含編譯代碼的，在運行時候，需要借助 webpack 的 vue-loader 事先把模板編譯成 render 函數(shù)。　　假如在你需要在客戶端編譯模板 (比如傳入一個字符串...

3403771864 2022-09-22 23:06 評論0 收藏0