CSS伪元素::before,::after

W3C的解释用一句话概括：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素中。

css伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html页面中没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

<1>、用法

这个两个伪元素在真正页面元素内部之前和之后添加新内容，例如：

<style>

p::before {content: "Hello Word"}

p::after{content: " Word"}

</style>

等价于下面的html结构：

<p> <span>hello Word</span>

你好!

</p>

伪元素::before和::after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置::before和::after时必须设置其content属性，content必须有值，至少是空。否则伪元素就不起作用。

::before和::after下特有的content，用于在css渲染中向元素头部或尾部添加内容。

这些添加不会出现在实际DOM结构中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用::before或::after展示有实际意义的内容，尽量使用它们显示修饰性内容。

那么问题来了，content属性的值可以有哪些内容呢，具体有以下几种情况：

字符串，字符串作为伪元素的内容添加到主元素中.
attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值。
url()/uri(), 引用外部资源，例如图片；
counter(), 调用计数器，可以不使用列表元素实现序号问题。

<2>、特点

伪元素是通过样式来达到元素效果的，也就是说伪元素不占用dom元素节点，引用::before和::after伪元素的主要特点如下：

●伪元素不属于文档，所以js无法操作它；

●伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件；

<3>、优缺点

不只是块级元素才可以有::before和::after，大部分的行级元素也可以设置伪元素

优点：

减少dom节点数；

让css帮助解决部分js问题，让问题变得简单；

缺点：

不利于SEO；

无法审查元素，不利于调试；

<4>、使用场景

4.1清除浮动

清除浮动在前端是很常见的问题，可以利用伪元素来清除浮动

....

</div>

<style>

.row:after {

clear: both;

content: "\0020";

display: block;

height: 0;

overflow: hidden

}

</style>

class=row的元素内部任何浮动都能清除掉，不用额外添加无意义的元素。

CSS伪元素::before,::after相关推荐

css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
教你玩转CSS 伪元素
目录 CSS 伪元素语法 :first-line 伪元素 :first-letter 伪元素伪元素和CSS类多个伪元素 CSS - :before 伪元素
html 的css骚操作,意想不到的 CSS 伪元素 before/after 各种骚操作 - 文章教程
CSS 伪元素 before/after 我们经常用到,常见的就是画个三角形.绘画背景阴影等,这篇文章将给大家分享还有很多有趣的操作,比如画线画图标等. 画细线普通的 border 最小高度为1px ...
css伪元素选择器，first-letter、first-line
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪元素选择器伪元素选择器,用于选择元素内的局部,包括first-letter.first-line等代码如下: p:firs ...
用css伪元素制作箭头图标
用css伪元素制作跳转箭头图标在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...
web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码在阿里iconfont中创建项目新建项目搜索自己想要的图标并添加入库点击购物车添加至项目回到"我的项目" ...
css 伪元素居中对齐
css 伪元素居中对齐 .demo {display: flex;padding: 40px;}.demo::after {content: '';display: inline-block;back ...

CSS伪元素::before,::after

CSS伪元素::before,::after相关推荐

最新文章

热门文章