### 作用
1. 一般情況我們使用content屬性和偽元素 是用來在原本的內容添加新的內容,常見的偽類比如::after 和::before
2. 使用偽元素 或content 插入的內容無法被選中, 比如我們在一個h1里面插入content ,
~~~
<style>
h1::after {
content: "這是after插入的內容"
}
</style>
<body>
<h1>這是一個標題</h1>
</body>
~~~
然后可以發現,這個after元素插入的內容是無法被選中的:

3. 可以使用偽元素來做分隔符
~~~
.border-left::before{
content: '';
padding: 0 10px;
margin-left:20px;
border-left: 1px solid #ddd;
}
<span>登錄</span><span class="border-left">注冊</span>
~~~

解析: 這里的padding 為什么是10 而margin-left是20時才居中? 因為這個偽元素他沒有寬度,所以這個padding0 10px會使該偽元素的左內邊距和又內邊距相加,變成20px然后插入文字的開頭,所以就跟左側的margin-left:20px 形成 邊界居中的情況。
- 空白目錄
- Javascript
- angularjs
- 自定義指令
- scope
- 自定義指令的封裝
- 自定義指令限制只能輸入數字
- 輪播圖
- 寫angular的順序
- $state
- video
- Es6
- Let
- 箭頭函數
- export
- promise
- 函數
- vue
- vue安裝,以及項目結構
- vue的使用
- easy-vue
- vue起步
- vue基礎
- vue-router
- vue-各文件的依賴關系
- vuex
- vue使用sass語法
- mpvue使用wx.parse
- vue-cli 構建vue項目
- vant的使用
- vue使用插件及常見問題
- 原生Js
- 數組
- ajax
- 執行上下文
- 正則表達式
- jqurey
- jqurey-mobile
- html5
- 工具
- svn使用總結
- webpack
- webpack的構建
- WebStorm
- 切圖相關
- 蘋果手機注意事項
- other
- 前端的價值
- 面試相關
- css
- 小程序如何引用外部字體
- 流的理解
- 替換元素
- content和偽元素
- padding和background 繪制圖形
- css圓角,陰影,漸變
- line-height verticle-align
- 使用background繪制4個直角
- android的字體偏上的問題
- 小程序
- 小程序常見問題
- 小程序常用效果
- mpvue
- nodejs
- 前端工程化學習筆記
- mork.js學習