CSS 伪元素 content 属性的诸多取值

2023-11-02 15:31

本文主要是介绍CSS 伪元素 content 属性的诸多取值,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文

有点 CSS 编写经验的人都知道,伪元素(Pseudo Element)可是个好东西,CSS 文档中的伪元素有好几个,这里我们着重介绍的是 ::before 和 ::after 两兄弟。借助它们,我们可以在布局中为正常的容器凭空添加两个虚拟的节点,配合一些 CSS 的“奇技淫巧”,便能展现一些 UI 交互上的 “黑魔法”。而让这两兄弟能够顺利生效的一个必备属性就是 content 了,没有它,这两兄弟就不起作用了。

下面,我罗列一下 content 属性的一些可取值,看看都有哪些妙用:

字符串

这可是 content 的标准用法,来看下:

.demo105-1::before {content: 'tips:';color: red;
}
<div class="demo105-1">这是一段提示信息!</div>

我们会看到呈现在网页上的效果如下

> 这是一段提示信息!

这是一段提示信息!
只要使用了这个 class 的容器,其开头必然会有一段红色的 “tips” 字样跟随,这就是我们常见的 content 用法。

接下来,有人开始蠢蠢欲动,放荡不羁起来了……

.demo105-2::before {content: '';display: inline-block;width: 0;height: 0;border: 0.5em solid transparent;border-left-color: red;
}

辣莫,现在是啥情况了呢?
在这里插入图片描述
这是一段提示信息!
我们用了一点点的小技巧,把一个空串的 content 通过 display 属性,硬是给改造出了维度来,再通过“挤边大法”给容器凭空造出了一个小三角。这是一个很有用的技巧,在一些交互 UI 中,弹出的对话框往往需要一些三角图标的指示,这时候不要再浪费资源引入外部图片,或者用 html 代码再写一个容器,我们充分利用现有容器的伪元素,一个 CSS 样式就解决啦!

暂且先抛砖引玉一翻,我们继续下一个话题

引用符号

属于引用符号的取值有 4 种,共 2 对,在 CSS 中用了语义较为清晰的关键词来表示: open-quote、 close-quote、no-open-quote、no-close-quote。在技术文档中乍一看这类值的引用,觉得也就这样,没啥好讲的,且看:


.demo105-3::before {content: open-quote;
}
.demo105-3::after {content: close-quote;
}

在这里插入图片描述
效果也就预料中的那样,容器中的内容被一对引号给引用起来了:

这是一段提示信息!
如果把上面两个取值给改成 no-open-quote 和 no-close-quote,测试下来,啥特殊情况都没发生,没有引号了,也没其他的改变,这啥鸡肋取值,这有啥好讲的?且慢,呵呵,这里有坑!

我们稍微深入一下,首先,我们可以自定义这个 quote 的形式吗?我用 “«” 和 “»” 行不?我学知乎,用 “『” 和 “』” 行吗?

技术文档上对于引用符号的取值描述是:

These values are replaced by the appropriate string from the quotes property.

居然还有个叫 quotes 的 CSS 属性!点开 quotes 属性说明页面,这个 CSS 属性可真是……默默无闻啊,咱从来没正眼瞧过啊,从 CSS2 开始就默默存在着,面对着我们的无视,它依然傲立(类似这种默默无闻的 CSS 属性还有一些,今后可能会慢慢讲到)!上代码我们来瞧瞧:

.demo105-4 {quotes: "『" "』";
}
.demo105-4::before {content: open-quote;
}
.demo105-4::after {content: close-quote;
}

这是一段提示信息!
再仔细看下 quotes 的 formal syntax: [ ]+,我们了解到,quotes 可以设置多组引用符号,用以应对次级引用。为什么说这茬呢,因为…… 我们又要说一下刚才觉得鸡肋的另一组取值 no-open-quote 和 no-close-quote。文档上对此对取值的解释是:

不会生产任何内容,但是会改变(增加或降低)引号层级。

不过这句话不太好理解啊,我们来看代码:

.demo105-5 {quotes: "«" "»" "‹" "›";
}
.demo105-5::before {content: no-open-quote open-quote;
}
.demo105-5::after {content: close-quote;
}

这是一段提示信息!
按我的理解,no-open-quote 起了一个无形的“占位”作用,把一级的引用符给用掉了,但又不输出任何东西,也就是文档里所说的“会改变(增加或降低)引号层级”。而 close-quote 则按着 quotes 属性的定义,总是和 open-quote 自动匹配。

关于引用符号是否还有其他有意思的玩法,大家自己再探索一下吧。

### 属性值的引用
将元素的属性以字符串形式返回。如果该元素没有该属性,则返回一个空字符串。Don’t talk, show me the code!

<div id="obj" class="demo105-6">该容器的 id 是:</div>
.demo105-6::after {content: '#' attr(id);color: red;
}

在这里插入图片描述
我们可以看到,采用 CSS 的内置方法 attr() 我们不但取到了指定属性的值,而且从中我们还可以了解到,content 中不同的取值可以通过空格的方式串联起来。巧妙的采用属性值引用,可以为我们的交互带来一些有趣的效果。

我们来看下下面这个响应式表格的例子,改变表格的宽度,将会呈现不同的效果。我们可以试着开关 SCSS 按钮,看看可视区域改变后,表格样式的变化情况:

  1. 计数器
    又有两个平时不太注意,但又非常有用的方法来了,counter() 和 counters(),因为这个属性值需要结合 CSS 计数器相关属性的使用,例如 counter-reset、counter-increment 等,不能单拆开来说,所以给大家两个参考:一个也是我几年前写的一篇博客: 《CSS 计数器的使用》,另一篇是个小小的代码演示:看看我们使用计数器还能做到哪些事情:

  2. 外部资源
    这又是一个看似平凡但又强大的取值类型。通过 url() 方法,我们可以像引用背景图片的方式在 content 中引入“图片内容”,不但可以以路径方式引用,而且同样支持以 data URI 的方式对外部资源进行加载。

.demo105-7::before {content: url('http://jimyuan.github.io/blog/favicon.ico');
}
.demo105-7::after {content: url('data:image/svg+xml, \<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"> \<circle cx="16" cy="16" r="16" fill="#1296db" /> \<circle cx="16" cy="16" r="10" fill="#ffffff" /> \<circle cx="16" cy="16" r="6" fill="#1296db" /> \</svg>');
}

各种资源尽管来啊!
从以上示例可以看出,我们采用了 CSS 中一种通用的方法,就能将外部图片资源给引入。上面讲了,我们熟悉的背景图片引用就采用类似的方法,使用了内置的 url() 函数。我们这时候是否能发散一下想到,在 CSS3 标准下,我们不但可以使用 background-image: url(http://your/data/uri) 的方式引用图片资源,我们还可以使用一些渐变函数创造资源。是的,content 属性确实可以接受使用渐变函数!

.demo105-8::before {content: radial-gradient(circle at 35% 35%, white 10%, pink 70%);display: block;border-radius: 50%;width: 100px;height: 100px;overflow: hidden;
}

在这里插入图片描述
( 艹!文章发表后发现,貌似 safari(v11, High Sierra) 不支持 content 中使用渐变函数嘛,在背景中是支持的,这……,看来兼容……性方面还是有问题 )

瞧瞧,我们在 content 里实现了渐变。如果再深入一下的话,那我们还可以知道,要实现渐变,CSS 提供了 linear-gradient(), gadial-gradient(), repeat-linear-gradient(), repeat-radial-gradient 等 4 种函数,据说将来 CSS4 还会增加一个叫做 conic-gradient() 的渐变函数,我们称之为角向渐变(也称作圆锥渐变)。

插个题外话,巧妙的利用 CSS 背景色、渐变、多背景堆叠、背景混合模式等,将会产生一些意想不到的美妙效果,具体例子可以参看 这里 赞叹一下吧!

下面有个发散型的思考,伪元素的 content 和背景里都能设置渐变图案,那究竟选择哪个合理点呢?我的感觉是:要插入一些简单的渐变图形,写在 content 里吧,就当做一张普通图片内容就好;如果是一些复杂的背景图,那还是用 background 的多背景加其他一些手段来实现吧。

这篇关于CSS 伪元素 content 属性的诸多取值的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/331580

相关文章

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

《解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题》在Spring开发中,@Autowired注解常用于实现依赖注入,它可以应用于类的属性、构造器或setter方法上,然... 目录1. 为什么 @Autowired 在属性上被警告?1.1 隐式依赖注入1.2 IDE 的警告:

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...