css中的before和after的作用

最新推荐文章于 2024-05-10 00:53:46 发布
最新推荐文章于 2024-05-10 00:53:46 发布
阅读量512 收藏
点赞数 1

（1）before    是一个伪元素，就是在某个元素之前加入某些内容

（2）after     是一个伪元素，就是在某个元素之后加入某些内容

**********下面利用的就是before和after做出来对话框的效果（就是你手机QQ上面的对话框的效果）*************

<!DOCTYPE html>
<html>
<head>
<title>css利用before和after做出来的对话框的效果</title>
<style type="text/css">
.test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height: 36px;
        border:1px solid black;
        border-radius:5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: "";  /*:before和:after必带技能，重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px solid transparent;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0
    }
  </style>
 
</head>
<body>
<div class="test-div"></div>
</body>
</html>

liying123466
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网站开发进阶(七十一）：css伪元素::before和::after用法详解
IT全栈 华强工作室
05-11 7169
文章目录一、前言二、伪元素::before和::after用法三、::before 和 ::after 特点四、::before 和 ::after 常见使用场景4.1 清除浮动4.2 利用attr()来实现某些动态功能4.3 与counter()结合实现序号问题，而不用使用列表元素4.4 超链接特效4.5 特效使用五、拓展阅读 一、前言 CSS3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元
css中::before ::after的用法
热门推荐
ladream的博客
03-15 3万+
一、介绍 ::before和::after是伪元素，（css3中为了与伪类做区别，伪元素采用双冒号的写法；但因为兼容性的问题，所以现在大部分还是统一的单冒号，比如:first-line、:first-letter、:before、:after等，但新的在CSS3中引入的伪元素就不允许用单冒号的写法。） “:before” 伪元素可以在元素的内容前面插入新内容。 “:after” 伪元素可以在元素的...
网站开发进阶(七十一）：css伪元素 before和 after用法详解_css before after
最新发布
2401_84411522的博客
05-10 1328
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】css有一系列的伪元素，本文主要详述::before和::after。
::before和::after是什么?
lb6514052的博客
02-27 2万+
本文从最简单的开始，解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。 content属性 1）::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。 2）::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，...
CSS 巧用 :before和:after
weixin_33763244的博客
12-31 610
前几天的晚上较全面的去看了下css的一些文档和资料，大部分的样式运用都没什么大问题了，只是有些许较陌生，但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多，主要是针对:before和:after写一些内容，还有几个小样式略微带过的介绍下。什么是:before和:after？ 该如何使用他们？:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。:afte...
css中的before与after
m0_48844699的博客
09-25 6273
before与after是css中的两个伪元素。其实before与after的编码是非常的简单的，就像我们在css中对他进行操作，比如设置他的背景颜色、设置它的大小、设置他的定位等等。只不过伪元素多加了一个content属性，如果我们对他不进行设置，那么我们设置的伪元素就会不起作用，我们可以设置content的内容为一个空字符串。当我们添加的content为字符串的时候，字符串作为伪元素的内容添加到主元素中，这个字符串是直接原样输出内容，里面即使有html的转义符，也不会被转译。来进行转换为块级元素。
CSS中的before和:after伪元素使用详解
09-25
在CSS中，`:before` 和 `:after` 伪元素是用于向元素的内容区添加内容的特殊工具。它们并不是真正的HTML元素，而是由CSS创建的虚拟元素，可以在元素的正常内容之前或之后插入额外的非文本内容，如图标、分隔符等。这...
CSS中灵活使用:before和:after
09-27
主要介绍了CSS中如何灵活使用:before和:after，主要内容介绍了什么是:before和:after？ 该如何使用:before和:after？感兴趣的小伙伴们可以参考一下
CSS伪类对象before和after的用法实例详解
09-25
在CSS中，`::before` 和 `::after` 是两种伪元素，它们允许我们在一个元素的内容前后添加额外的内容。这两个伪元素通常与`content`属性一起使用，可以在不修改HTML结构的情况下增强页面的视觉效果或者实现某些特定...
那些你所不知的CSS ::before 和::after 伪元素用法
09-22
这两个伪元素在CSS3中被正式定义，以区分伪元素（`::before`和`::after`）与伪类（`:before`和`:after`），尽管大多数现代浏览器仍支持单冒号的写法，但推荐使用双冒号以遵循标准。 ### 1. 基本语法 `::before`在...
详解css3中的伪类before和after常见用法
01-18
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下： #example:before { content: #; color: red; } #example
HTML中 :after和:before的作用及使用方法（转）
qq_27009517的博客
12-16 3113
1. :before 和 :after 的主要作用是在元素内容前后加上指定内容，示例： HTML代码： <p>你好</p> CSS代码： p:before{ content: 'Hello'; color: red; } p:after{ content: 'Tom'; color: red; } 效果如图： 以上代码是:before和:after的基本用法，但是这两种伪类还有很多更方便的用法。 2. ：after清除浮动 .
::before(:before)和::after(:after)使用
duidandan的博客
12-03 956
CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 使用::before时必须要用content:" " /* CSS3 语法 */ element::before { 样式 } /* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */ element:before { 样式 } li::before { content: ""; width: 21px; height: 1
css中的::before和::after
scwMason的博客
09-16 2541
这里的before和after是指相对于内容而言的，而不是相对于盒子，比如： 这里的这个白色的小圆，就是在这个正方形的div中的内容（那些字母）前面，表示before   帮助博客...
你所不知的 CSS ::before 和 ::after 伪元素用法
Just Code
03-18 1336
CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。 Creative Button Styles ...
css中的before和after
qq_44778404的博客
08-05 105
before css 旋转_CSS中"::after与::before"的作用是什么？
weixin_39826342的博客
12-20 74
展开全部首先要明白一种思想：结构和样式分离。62616964757a686964616fe4b893e5b19e31333365633938结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和:after中的content: ""; ------就算没有----...
CSS中:before和:after选择器的用法
weixin_30955617的博客
09-10 156
在线演示这次给大家带来的是对话气泡效果，主要是演示了 :before / :after 和 border 的用法，赶快来围观吧。 阅读原文：CSS中:before和:after选择器的用法 转载于:https://www.cnblogs.com/gbin1/p/3964552.html...
CSS中:before和:after伪元素的content属性以及counter属性使用
蔡武坤的博客
03-31 4991
:before和:after是CSS中定义的伪元素,配合content属性，可以在元素的前面或后面插入新元素,content即插入元素的值,这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。简单的实例如下：在每个 &lt;p&gt; 元素的内容之前插入新内容：p:bef...
css中before和after
06-08
在 CSS 中，`:before`和`:after`是伪元素选择器，它们可以让我们在元素的内容之前和之后插入一些内容。 `:before`和`:after`可以用来添加一些装饰性的元素，例如图标、箭头、文本等等。这些元素不需要在 HTML 中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值