<div>標(biāo)簽與before,after偽元素生成加號(hào)

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

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

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

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

注意：

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

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

應(yīng)用舉例：使用一個(gè)

標(biāo)簽生成一個(gè)加號(hào)（寬150px，高50px），如圖：

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

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

實(shí)現(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;

}

云服務(wù)器 GPU云服務(wù)器 html5元素與標(biāo)簽 python &lt&gt java &lt=&gt java&lt &gt

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

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

相關(guān)文章

前端知識(shí)點(diǎn)總結(jié)——C3

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

meislzhua 2019-08-30 14:01 評(píng)論0 收藏0
html之css選擇器學(xué)習(xí)

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

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

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

niuxiaowei111 2019-08-29 13:10 評(píng)論0 收藏0
css

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

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

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

3403771864 2022-09-22 23:06 評(píng)論0 收藏0