想开个网站做外贸怎么做,设计图的网站,南宁网站建设seo,南通网站建设找哪家目录
一、CSS 伪元素
二、::before ::after 介绍
1、::before
2、::after
3、content 常用属性值
三、::before ::after 应用场景
1、设置统一字符
2、通过背景添加图片
3、添加装饰线
4、右侧展开箭头
5、对话框小三角
6、插入icon图标 一、CSS 伪元素
CSS伪元…目录
一、CSS 伪元素
二、::before ::after 介绍
1、::before
2、::after
3、content 常用属性值
三、::before ::after 应用场景
1、设置统一字符
2、通过背景添加图片
3、添加装饰线
4、右侧展开箭头
5、对话框小三角
6、插入icon图标 一、CSS 伪元素
CSS伪元素是指在CSS 中使用一些特殊的选择器创建出来的虚拟元素 并不是实际存在的HTML元素
用来选择和操作文档中的特定部分实现一些特殊效果伪元素使得在不增加额外HTML标签的情况下对文档中的内容进行样式化伪元素也是一种元素可以设置html中支持的各种属性包括元素的布局、定位、宽高、背景等等
本文主要介绍::before 、::after 这个两个伪元素的相关内容和一些使用场景
二、::before ::after 介绍
::before ::after 伪元素用来给元素前面或者后面插入指定内容
使用content属性来指定要插入的内容必须配合content属性一起使用content的属性值可以为空伪元素的display属性值默认为inline
1、::before
::before选择器用来向指定元素之前插入内容
1语法
元素::before{content: 要插入的内容;/* 其他属性 */
}
2示例
给页面所有的p元素前面插入内容
stylep::before{content: 使用::before伪元素插入的内容——;/* 其他属性 */}
/style
bodydivp第一个P标签中的内容/pp第二个P标签中的内容/pp第三个P标签中的内容/p/div
/body 2、::after
::after选择器用来向指定元素之后插入内容
1语法
元素::after{content: 要插入的内容;/* 其他属性 */
}
2示例
给页面所有的p元素后面插入内容
stylep::after{content: ——使用::after伪元素插入的内容;/* 其他属性 */}
/style
bodydivp第一个P标签中的内容/pp第二个P标签中的内容/pp第三个P标签中的内容/p/div
/body 3、content 常用属性值
::before ::after 必须配合content属性一起使用以下是content的常用属性值
序号属性值说明1string设置文本内容2url(url)设置图片等媒体文件的URL链接3open-quote设置为前引号4close-quote设置为后引号5attr(attribute)将元素的 attribute 属性以字符串形式返回6counter设定计数器7none设置 content 为空值8normal在 :before 和 :after 伪类元素中会被视为 none即也是空值
1设置文本内容
设置content的属性值为string类型即可给伪元素添加文本
stylespan::before{content: 使用::before添加的文本前缀——————;}span::after{content: ————使用::after添加的文本后缀;}
/style
......
bodyspan classbox我是HTML元素中的文本/span
/body 2设置媒体链接
通过url()属性值即可导入媒体文件为伪元素的内容
style.container {margin: 100px;}.avatar::after{content: url(D:\\test\\girl.png);display: block;}
/style
......
bodydiv classcontainerdiv classavatar示例图片/div/div
/body 注意这里使用url添加的图片不能设置大小最好通过背景添加图片
3设置前 || 后引号
通过open-quote或close-quote属性值即可给设置伪元素的内容为前引号或后引号
stylep:nth-child(1)::before{content:open-quote;/* 其他属性 */}p:nth-child(2)::after{content:close-quote;}
/style
......
bodydivp添加前引号/pp添加后引号/p/div
/body 4获取元素属性
通过attr()获取元素的某一个属性值以字符串的形式返回并设置为伪元素的内容
stylea:after {content: ( attr(href) );}
/style
......
bodydiva hrefhttps://www.csdn.netCSDN/a点击跳转至CSDN.../divdiva hrefhttps://www.baidu.com百度/a点击跳转至百度.../div
/body 5设置计数器
stylediv {counter-increment: index;}div:before {content:counter(index);}
/style
......
bodydiv、、、、、、我是第1个div、、、、、、/divdiv、、、、、、我是第2个div、、、、、、/divdiv、、、、、、我是第3个div、、、、、、/divdiv、、、、、、我是第4个div、、、、、、/div
/body 三、::before ::after 应用场景
虽然 ::before ::after 这两个伪元素的使用方式非常简单但若能灵活应用就能实现一些很不错的CSS效果
1、设置统一字符
stylep::before{content: * ;color: red;font-size: 24px;/* 其他属性 */}p::after{content: ____________;/* 其他属性 */}
/style
...
bodydivp姓名/pp年龄/pp出生日期/pp居住地址/p/div
/body 2、通过背景添加图片
style.container{margin: 100px;}.container::after{content: ;display:block;width: 260px;height: 260px;background-image: url(D:\\test\\girl.png);background-position: center;background-size: cover;}
/style
......
bodydiv classcontainer通过背景添加图片/div
/body 3、添加装饰线
style.line{display: flex;align-items: center;margin: 60px;height: 40px;font-size: 18px;}.line::before, .line::after{content: ;width: 300px;border-top: 6px double;margin: 5px;}/style
......
bodydiv classline添加装饰线/div
/body 4、右侧展开箭头
style.container{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 400px;margin: 100px auto;padding: 30px 0;border-radius: 8px;box-shadow: 0 0 4px 1px #acacac;}.setting-item{position: relative;align-items: center;display: flex;width: 300px;height: 40px;margin-bottom: 20px;border-bottom: 1px solid #ccc;}.setting-item::after{position: absolute;right: 0;content: ;width: 8px;height: 8px;border-top: 1px solid #666;border-right: 1px solid #666;transform: rotate(45deg);}/style
......
bodydiv classcontainerdiv classsetting-item账号设置/divdiv classsetting-item权限管理/divdiv classsetting-item相关服务/divdiv classsetting-item帮助与反馈/divdiv classsetting-item....../div/div
/body 5、对话框小三角
style.container {width: 400px;margin: 100px auto;padding: 30px 0;border-radius: 8px;box-shadow: 0 0 4px 1px yellowgreen;}.left-box,.right-box {display: flex;}.right-box {justify-content: end;}span {position: relative;display: flex;align-items: center;background-color: yellowgreen;border-radius: 6px;margin: 4px 14px;padding: 16px;}.left-box span::before, .right-box span::after{position: absolute;content: ;width: 12px;height: 12px;background-color: yellowgreen;transform: rotate(45deg);}.left-box span::before{left: -6px;}.right-box span::after {right: -6px;}
/style......bodydiv classcontainerdiv classleft-boxspanNice to meet you!/span/divdiv classright-boxspanNice to meet you, too!/span/div/div
/body 6、插入icon图标
style.login-box{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 400px;height: 400px;margin: 100px auto;border-radius: 8px;box-shadow: 0 0 4px 1px #acacac;}.title{font-size: 24px;font-weight: 700;margin-bottom: 40px;}.account, .pwd, .login-btn, .forgot-pwd{width: 300px;height: 40px;line-height: 40px;}.account, .pwd{display: flex;align-items: center;border-bottom: 1px solid #ccc;font-size: 14px;color: #888;}.pwd{margin-top: 20px;}.account::before, .pwd::before{content: ;display: inline-block; width: 24px;height: 24px;background-repeat: no-repeat;background-position: center center;background-size: contain;margin-right: 8px;}.account::before{background-image: url(D:\\test\\user.svg);}.pwd::before {background-image: url(D:\\test\\pwd.svg);}.login-btn{text-align: center;color: #fff;font-size: 16px;font-weight: 700;background: #2687F0;border-radius: 5px;margin-top: 40px;}.forgot-pwd{text-align: right;font-size: 14px;color: #888;margin-top: 20px;}
/style
......
bodydiv classlogin-boxdiv classtitleXXX 管理系统/divdiv classaccount请输入账号/divdiv classpwd请输入密码/divdiv classlogin-btn登 录/divdiv classforgot-pwd忘记密码/div/div
/body 每天进步一点点~
一个实用的CSS小技巧~
