网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > css

CSS before和after伪元素有什么作用?

2021/8/4 21:36:56

伪元素既然是伪元素,那么作为结构与表现分离的一种实现,其作用应该是对文本起到很好的修饰作用,而不是把它用来表现文本。 CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所…

      伪元素既然是伪元素,那么作为结构与表现分离的一种实现,其作用应该是对文本起到很好的修饰作用,而不是把它用来表现文本。 CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”。

      ::before和::after是伪元素,(css3中为了与伪类做区别,伪元素采用双冒号的写法;但因为兼容性的问题,所以现在大部分还是统一的单冒号,比如:first-line、:first-letter、:before、:after等,但新的在CSS3中引入的伪元素就不允许用单冒号的写法。)

      “:before” 伪元素可以在元素的内容前面插入新内容。

      “:after” 伪元素可以在元素的内容之后插入新内容。

      ::before或::after都必须和content属性结合使用,content不能没有,内容至少为空;伪元素的display默认为inline,可以自己改.

     下面我们通过实例来看看CSS before和after伪元素的作用

      1.清除浮动 

      通常我们清除清除浮动的方式就是在浮动元素后面添加一个空的Div标签,然后在设置它的清除浮动要是,使用after伪元素,我们就不需要添加无意义的div标签在html中了,下面的例子就使用了伪元素清除浮动


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <style type="text/css">
      ul {
          margin: 200px;
          background: #ccc;
          padding: 10px;
          border: 1px solid #999;
          list-style:none;
      }
      ul::after {
          clear: both;
          content: '';
          display: block;
      }
      li {
          float: left;
          margin-left: 10px;
      }
      li::after {
          content: '/';
          margin-left: 10px;
      }
      li:last-child::after{
          content: none;
      }
  </style>
</head>
<body>
<ul>
    <li>篮球</li>
    <li>网球</li>
    <li>棒球</li>
</ul>
</body>
</html>

微信截图_20210804213013.png


      2.实现对话框效果


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <style type="text/css">
.left,.right{
position: relative;    /*后面移动会盒子位置*/
display: table;
min-height: 40px;
text-align: center;
background-color: #9EEA6A;
margin: 0;
border-radius: 7px;
}
.left{
left:10px;
}
.left::before,.right::after{
position: absolute;
display: inline-block;
content: "";
width: 0px;
height: 0px;
border: 8px solid transparent;
top: 15px;/*移到中间*/
}
.left::before{
border-right-color: #9EEA6A;
left: -16px;
}
.right::after{
border-left-color: #9EEA6A;
right: -16px;
}
.left p,.right p{
padding:0px 10px;
}
.right{
right:-150px;
}
  </style>
</head>
<body>
    <div class="left">
        <p>你好啊</p>
    </div>
    <div class="right">
        <p>好久不见~</p>
    </div>
</body>
</html>


微信截图_20210804213115.png



      3.阴影

      通过设置before,after不同位置,不同旋转角度,可以实现现在网络很流行的阴影效果,同时要保证伪类的颜色及z-index。有了这种方法 我们就可以扩展出各种各样的阴影效果。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>www.woaidaogu.com</title>
    <style type="text/css">
        body{background-color:#ebebeb}
        div.outer{width:400px;
            height:250px;
            padding:5px;
            margin:100px auto;
            position:relative;
        }
        div.child{
            position:absolute;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color:#fff;
            color:#000;
            line-height:250px;
            font-family:'Microsoft YaHei';
            text-align:center;
            z-index:2
        }
        div.outer::before,div.outer::after{content:'';
            z-index:1;
            width:50%;
            height:3px;
            position:absolute;
            left:10px;
            bottom:7px;
            background-color:transparent;
            box-shadow:5px 5px 10px rgba(0,0,0,0.5);
            -webkit-transform:rotate(-3deg);
 
        }
        div.outer::after{
            left:auto;
            right:10px;
            -webkit-transform:rotate(3deg)
        }
    </style>
 
</head>
<body>
<div class='outer'>
    <div class='child '>
        我是内容我是内容我是内容
    </div>
 
</div>
</body>
</html>


微信截图_20210804213255.png


      还有很多通过before,after伪元素制作的效果,我们就不一一举例了!

      以上就是CSS before和after伪元素的作用,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01