伪元素学习包含::before、::after的用法
<!-- 伪元素的学习(伪类元素就是页面代码不会出现伪类元素)
1、::before before和after主要是配合content属性使用的
2、::after
3、css content样式 content用来定义插入内容必须有值至少是空
默认情况下伪元素的display的默认值是inline
可以通过设置display:block来改变其显示。
通过attr()调用当前元素的属性
通过url()引用媒体文件。
-->
<!DOCTYPE html>
<html>
<head>
<title>伪元素的用法</title>
<style type="text/css">
a{
text-decoration: none;
}
a::before{/*content必须配合url()的使用*/
content: url(image/hao123.png);
}
a::after{
content: url(href);
margin: 20px;
}
.bigbox{
width: 312px;
height: 72px;
}
.touxiang{
width: 70px;
height: 72px;
border-radius: 50%;/*每个角都是圆角*/
overflow: hidden;/*溢出隐藏*/
background:url(image/picture1.png) no-repeat -24px -10px;/*负号是向左移的意思*/
border:1px solid #000000;
display: inline-block;/*修改图像的性质*/
}
.liaotiankuang{
width: 234px;
height: 60px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 10px 10px 10px 0;/*圆角*/
float: right;/*向右浮动和图片在一行上*/
/*不过遇到块级元素一占就占一整行*/
margin-top: 12px;/*72-60*/
position: relative;/*相对定位*/
}
.liaotiankuang::before{
content: url(image/picture2.png);
position: absolute;/*绝对定位*/
left:-28px;
top: 23px;
}
</style>
</head>
<body>
<a href="https://www.hao123.com/">hao123</a>
<div class="bigbox">
<div class="touxiang"> </div>
<div class="liaotiankuang"></div>
</div>
</body>
</html>
伪元素学习包含::before、::after的用法相关推荐
- CSS3中伪元素::before和::after的经典用法
::before 和 ::after其实就是附着在元素前后的伪元素. 说他是"伪"元素的意思就是,元素不是在DOM中生成的,而是在浏览器渲染引擎渲染CSS的时候添加上去的. 如果百 ...
- css before after用法_CSS 伪元素基础知识:content 与counter 实用技巧(二)
在CSS 伪元素基础知识:before 与after (一),笔者已经介绍过 CSS 里的::before 和::after 这两个伪元素,以及content 相关的用法,这篇将针对content 搭 ...
- 细数CSS伪元素及其用法
引言 CSS中有两个很常见的概念,伪类和伪元素. 伪类用于在页面中的元素处于某个状态时,为其添加指定的样式. 伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中, ...
- css3伪元素有哪些(两个必会的伪元素)
一.css3伪元素是什么? css3伪元素用于向某些选择器设置特殊效果.已存在元素是指DOM中存在的,伪元素则是虚拟的一种,样式也是给这个虚拟的元素使用的. 比如伪元素 :before和:after, ...
- HTML:::before和::after伪元素的用法
随笔 - 366 文章 - 0 评论 - 392 ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link ...
- css伪元素before和after用法详解
css伪元素before和after用法详解 要想了解伪元素before和after到底是什么,首先就应该打开编译器敲入代码并在浏览器运行检查 <!DOCTYPE html> <ht ...
- css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
百度前端技术学院2017于2月24日开始进行,一共有6个学院可供学习,分别是小薇学院(html/css基础).斌斌学院(js基础).耀耀学院(小游戏/交互).商业平台学院(web/ios/androi ...
- CSS之 :before :after的用法,伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
- [转]你所不知的 CSS ::before 和 ::after 伪元素用法
SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...
最新文章
- 将整数拆分为2的幂次方
- 关于fragment之间的数据传输
- go语言笔记——append是内置的函数!!!new是一个函数!!!调试可以使用闭包,本质上是print调试,尼玛!...
- SAP ABAP如何隐藏你写的程序代码(危险,请小心谨慎)
- RocketMQ的历史发展
- java输出链表的值_[剑指offer] 从尾到头打印链表(三种方法) java
- new Class() 与 Class.newInstance()
- 动态路由之OSPF协议综合实验
- 5G技术将如何改变我们的世界
- 虚幻引擎插件 - Maya LiveLink - 安装和使用
- ext2、ext3与ext4的区别
- SC/Tetra.v7-ISO 1DVD(流体模拟分析)
- 微信小程序实现FBX模型的动画加载
- 服务器ping不通网址!
- 【shell】scp 同时向多个主机拷贝数据
- Chrome关闭密码检查弹窗:更改您的密码 某个网站或应用发生了数据泄露导致您的密码外泄
- 7-5 循环日程表 (10 分)
- 同学早已年薪百万,你却还在朋友圈集赞
- 八斗大数据20期冲击百万年薪完结分享
- LaTeX 注释快捷键
热门文章
- 计算机相关专业提升学历的解决方案(博士研究生)
- 帮你解剖Python的一个轻量级桌面GUI开发第三方库:Eel,让它体无完肤
- 浅谈Java中try catch 的用法
- ssh连接报错“WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED“问题原因及解决方法
- 叮咚,ps术语请查收~
- ⌨RK61键盘使用方法
- 以我卖电子书赚50万的经历告诉你,如何学习并用新技术赚钱?
- python下拉菜单无限营销工作室_Python生成流水线《无限拍卖》文字!
- 可以免费打电话的网站
- 语音识别中的WFST和语言模型