css:after 和:before选择器 --笔记

最新推荐文章于 2025-10-10 22:55:39 发布

原创最新推荐文章于 2025-10-10 22:55:39 发布 · 826 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #after #before

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍CSS中:after与:before选择器的使用方法，包括如何在这两个伪元素之后插入内容以及设置所插入内容的样式。通过实例展示:border-line:after伪元素如何创建一个特定样式的视觉效果。

CSS :after 选择器

元素的内容之后插入新内容：

:after 选择器在被选元素的内容后面插入内容。

使用 content 属性来指定要插入的内容。并设置所插入内容的样式

实列

.border-line:after{
  content: '';
  position: absolute;
  width: 60rpx;
  height: 6rpx;
  bottom: 0;
  left: 50%;
  margin-left: -16rpx;
  background-color: #343849;
}

效果

CSS :before 选择器

内容之前插入新内容，其他与after一样

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

迷途大灰狼

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS3 新增的选择器 ::before ::after经典使用场景

鸭绒的博客

07-13

889

文章目录1.属性选择器2.结构伪类选择器2.1 ：nth-child(n)（重点）3.伪元素选择器(重点) 1.属性选择器 属性选择器可以根据元素特定属性来选择元素，这样就可以不借助于类或者id选择器。格式一：标签名[属性名] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=de

HTML-CSS:在视频课程频道的 Html & CSS 课程中进行的笔记和练习

05-30

1. **选择器增强**：CSS3支持类选择器、属性选择器、伪类和伪元素，如:nth-child()、:not()、::before和::after等，使得样式应用更加精准。 2. **响应式设计**：媒体查询（Media Queries）是响应式设计的关键，允许...

参与评论您还未登录，请先登录后发表或查看评论

CSS :after 选择器

xiqim的专栏

01-19

600

CSS :after 选择器 CSS 选择器参考手册实例在每个元素的内容之后插入新内容： p:after { content:"台词："; } 亲自试一试浏览器支持 IE Firefox Chrome Safari Opera

CSS :before选择器

lengqingIT的博客

03-20

333

HTML 选择器 <body> <p>:before 选择器向选定的元素前插入内容</p> <p>实例在每个 p 元素之前插入内容</p> <p><b>www.semi-warm.com</b></p> </body> CSS ...

深入解析 CSS `::before` 伪元素

最新发布

2501_93104808的博客

10-10

696

CSS ::before 伪元素用于在元素内容前插入生成内容，通过content属性添加文本、图标或装饰性元素。它不会修改HTML结构，仅作视觉呈现。语法为selector::before{content:value}，支持字符串、属性值、计数器等。默认行内显示，需设置content才能生效。兼容性好，但需注意：生成内容不可被屏幕阅读器识别，适合装饰性用途而非关键信息。典型应用包括自定义列表标记、引用符号、状态图标等。与::after类似，但位置不同。最佳实践推荐使用双冒号语法，并避免过度使用影响性能。

css伪元素选择器before 和 after 的使用

tsw529的博客

02-07

5557

css3伪元素选择器before 和 after 的使用前言:最近收集了一些关于before 和 after 的使用，汇总了一下，不全面，但是，希望便于以后自己查看。 :before 的作用:在子元素的最前面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容，但是通常为空字符串。 :after 的作用: 在子元素的最后面, 添加一个伪元素, 伪元素...

CSS3选择器 ::before和::after

weixin_39093202的博客

01-11

698

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearf...

::before 和 ::after 伪元素选择器

weixin_58697368的博客

11-08

736

伪元素不是真正的页面元素，在 HTML 中没有对应的元素。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，实际并不存在于 HTML 文档中。伪元素在 HTML 中无法审查，但是伪元素的用法和真正的页面元素一样，可以用来对CSS设置样式，用于将特殊的效果添加到某些选择器。

精选资源

微信小程序 CSS 选择器::after和::before的简单使用

03-29

前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。...

CSS选择器到底有哪些？CSS笔记（一）

01-20

10. **伪元素选择器**：如`::before`和`::after`用于在元素内容前后插入内容。 11. **属性选择器**：根据元素的属性来选择，如`[target="_blank"]`会选择所有目标为新窗口打开的链接。 12. **兄弟元素选择器**：`~`...

jquery CSS选择器笔记

10-29

还有“:before”和“:after”选择器，它们可以用来在元素的内容之前和之后添加生成内容，常用于实现装饰性的文本效果。以上就是本次分享的关于CSS选择器的知识点，这些选择器不仅在jQuery中可以使用，也能在纯CSS...

css3新增选择器（ ::selection选择器、 ::before选择器、::after选择器）

m0_71814235的博客

07-19

1556

css3新增选择器（ ::selection选择器、 ::before选择器、::after选择器）

after伪类不显示_CSS伪类：CSS3鼠标滑过按钮动画第二节

weixin_42212792的博客

01-06

334

前言有了第一小节的经验，我们可以对直接的动画效果做一些升级效果，如果组合:before、:after，效果有更酷。请先看一下效果示例吧：下面一个一个示例讲解示例一<button class="btn-1">按钮一</button> <style> button{ position: relative; width: 100px; height: 4...

CSS 中的 ::before 和 ::after 伪元素

热门推荐

m0_65029152的博客

07-11

1万+

本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；

HTML5基础加强css样式篇（常用伪元素选择器after，before）（十五）

余正源的博客

03-16

2371

注：1伪元素与元素的区别：无法获取文本内容； 2.规范要求使用：：实际使用：（支持IE8）； 3.伪元素和本身元素在同一层级 1.after伪元素： HTML5初级阶段 /*.box::after {*/ .box:after { content: "Hi ";

CSS :after 或者 :before选择器

zmd9999的博客

04-17

2880

定义和用法:after 选择器在被选元素的内容后面插入内容。:before 选择器在被选元素的内容前面插入内容。使用 content 属性来指定要插入的内容。例子：WXML代码：WCSS代码：效果图:...

CSS中:before和:after选择器的用法

GBin1.com

09-10

1267

在线演示这次给大家带来的是对话气泡效果，主要是演示了 :before / :after 和 border 的用法，赶快来围观吧。阅读原文：CSS中:before和:after选择器的用法

html5中before,before和after用法详解

weixin_30965253的博客

06-20

2860

before和after有什么语法用法？有什么区别before prep.在…之前,先于 adv.以前；在前 conj.在…以前；在…之前 after adv.后来,以后 prep.在……之后 conj.在……之后 adj.以后的区别：反义词联系：均是描述位置关系与什么语法有关：均用于连接词使用,before往往出现在过去完成时态或将来完before和 after 怎么用before (1)...

CSS伪类:before 和 :after

weixin_33922672的博客

04-14

524

CSS用了许久，对一些伪类熟视无睹，从不想着去搞清楚一下。比如说这个 :before :after 其实，:before 表示该标记前面的样式，反之 :after 代表设置后面的样式。网页上常常看到有些文字前或后有小图标，用的就是这种样式：对应的代码有： <button type="button" class="btn text" onclick="...