大家好,我给大家介绍一下,这是CSS伪元素:before与:after

简介:

之前对于CSS伪元素的应用并不多,最近在用一款建站系统为客户做企业门户网站时,发现网页HTML代码中经常出现::before和::after。后经查资料才了解,这都是CSS的为元素。CSS 伪元素用于向某些选择器设置特殊效果。所以本文将和大家一起分享交流CSS的伪元素的使用知识。



基本语法

所谓的伪元素,顾名思义他们并不是真正的HTML元素。::before与::after用于向目标元素里内容的前面或后面添加内容。也许你已经注意到了,为什么before与after的前面一会单个冒号,一会又两个冒号,有什么区别么?其实也没什么区别,只是CSS3中为了区别他们在HTML代码与CSS代码里的表现形式,将html中的伪元素显示为双冒号。在书写CSS代码时,如果不考虑过旧的浏览器兼容问题,无论是用单冒号还是双冒号,结果都是一样的。


这里要强调注意的是,这里所说的“前”与“后”,是指目标元素里面的内容的前后,而不是目标元素的前后。所以说,伪元素是目标元素的子元素。


我们来看个示例:



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
  div:before{
    display:table;
    content:"在段落前面添加内容";
  }
  a:after{
    display:table;
    content:attr(href);
  }
</style>
</head>
<body>
  <div>
    <p>这里是段落文本</p>
    <a href="http://www.chanzhi.org">我的官网</a>
  </div>
</body>
</html>



content是伪元素必不可少的一个属性。用于设置要添加的内容。这个内容可以是字符文本也可以是目标元素自身的某属性值。比如在上例中,a标签内容后添加了href属性值,即链接地址。显示效果如下:



实例应用

伪元素的作用当然不会仅限于此,实际应用中,我们可以通过伪元素添加各种界面显示特效。这里我们举一个常见的清除浮动的例子。之前我们很多朋友清除浮动的方法是底部添加一个空div,采用clear:both;的样式。代码如下:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
  div.con_left,div.con_right{
    float:left;
  }
  .clear{
    clear:both;
  }
</style>
</head>
<body>
  <div class="con_left"></div>
  <div class="con_right"></div>
  <div class="clear"></div>
</body>
</html>


现在通过伪元素,我们可以做的更简便,不需要添加空元素。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
  div.con_left,div.con_right{
    float:left;
  }
  .content{
    display:table;
    content:"";
    width:0px;
    clear:both;
  }
</style>
</head>
<body>
  <div class="content">
  <div class="con_left"></div>
  <div class="con_right"></div>
  </div>
</body>
</html>

小结:

通过:before与:after伪元素,我们可以在CSS中设计出更多的样式特效。本文我们一起分享交流了伪元素的使用,如果大家在平时实际应用过程中有更好的案例,欢迎和大家一起分享交流。我们共同学习,共同交流,共同进步。


更多技术文章,欢迎关注『网站建设运维百科』

6a74ef7f96511a3ffb28b690ebaa4e8536067a10

1Q2BrE8y5UnKFF.gif
目录
相关文章
|
5天前
|
前端开发 开发者
提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
【4月更文挑战第2天】 提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
36 12
|
5天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
|
5天前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
13 0
|
5天前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(上)
【CSS进阶】巧用伪元素before和after制作绚丽效果
29 0
|
5天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
19 0
HTML5/CSS3粒子效果进度条代码
|
5天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
5天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
5天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
5天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
5天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。