• CSS中before、after伪类选择器的巧用


    大家好,今天给大家带来使用css中 before 、 after 实现两个效果,话不多说,我们先来看看, before 和 after 它们的作用是什么

    选择器 作用
    before 向选定的元素前插入内容
    after 向选定的元素后插入内容

    作用描述简单也容易理解,就是在指定的元素前面或者后面添加额外的内容,那么具体我们能够用到什么地方呢?

    使用场景一:

    我们经常在论坛中看到如下效果:

     这类似一个菜单,点击标题就可以快速跳转到指定的页面,而这些标题之间都有一个“>”符号进行间隔,而这个效果,我们就可以使用它们来实现了,下面贴上代码片段

     1 <head>
     2     <meta charset="UTF-8">
     3     <title>before、after伪类选择器演示</title>
     4     <style>
     5         a {
     6             text-decoration: none;
     7             font-size: 14px;
     8             color: #4687ff;
     9         }
    10         /* 在a便签后面插入>符号并设定颜色以及间隔 */
    11         a:after {
    12             content: '>';
    13             color: #c3c3c3;
    14             margin-left: 5px;
    15         }
    16         /* 将最后一个a便签的符号去掉 */
    17         a:last-of-type:after {
    18             content: '';
    19         }
    20     </style>
    21 </head>
    22 <body>
    23     <a href="#">首页</a>
    24     <a href="#">活动区论坛</a>
    25     <a href="#">#回顾2019# ZOL月赛年末特别版 摄影作品有奖征集</a>
    26 </body>

    在伪类中我们看到有个属性content,它是给新插入的元素设定内容的,其中为纯文本,即便你写入各种便签,它也会以文本的形式显示(如果content中为空也就是'',那么我们在页面中看不到任何内容,但是这个元素还是存在的),好我们看看这段代码的结果

    效果很棒吧!!

    使用场景二:

    我们先看看一张图片:

     这是京东商城中的一张截图,上面有很多品牌的LOGO框,当我们将鼠标一上去后,会有一个红色框高亮显示,我们会发现在没有选中时,它们的框是浅灰色的并且比较细,而移上去后边框变为红色并且变粗了,这时我们可以想到用hover伪类选择器来实现,当鼠标一上去后,设定边框颜色以及粗细,如下面代码片段所示:

     1 <head>
     2     <meta charset="UTF-8">
     3     <title>hover伪类选择器演示</title>
     4     <style>
     5         span {
     6             display: inline-block;
     7             border: 1px solid #4687ff;
     8             padding: 5px 8px;
     9         }
    10         span:hover {
    11             border: 2px solid #ff5c70;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16     <div>
    17         <span>盒子1</span>
    18         <span>盒子2</span>
    19         <span>盒子3</span>
    20         <span>盒子4</span>
    21     </div>
    22 </body>

    运行代码后,我们发现一个问题,的确边框颜色变红并且变粗了,但是有一个缺陷就是,边框会有轻微的错位跳动的现象,如下图所示:

    现在我们就可以使用before或者after伪类来解决这一问题了,贴上代码片段:

     1 <head>
     2     <meta charset="UTF-8">
     3     <title>before伪类选择器实现鼠标移入边框着重显示效果</title>
     4     <style>
     5         /* 注意该元素需要将定位方式更改为相对布局 */
     6         span {
     7             display: inline-block;
     8             border: 1px solid #4687ff;
     9             padding: 5px 8px;
    10             position: relative;
    11         }
    12         /* 将插入的元素定位方式更改为绝对布局 */
    13         span:hover:before {
    14             position: absolute;
    15             content: '';
    16             width: 100%;
    17             height: 100%;
    18             border: 2px solid #ff5c70;
    19             top: -2px;
    20             left: -2px;
    21         }
    22     </style>
    23 </head>
    24 <body>
    25 <div>
    26     <span>盒子1</span>
    27     <span>盒子2</span>
    28     <span>盒子3</span>
    29     <span>盒子4</span>
    30 </div>

    运行后的效果,如下图所示:

    整个实现的思路就是通过插入一个元素,覆盖在其上的的原理,达到效果
    好了,本次的分享就到这里了。

  • 相关阅读:
    SpringBoot配置文件(2)
    SpringBoot配置文件(1)
    java8新特性之stream流
    java8新特性之Lambda表达式
    zoj 1709 Oil Deposits
    zoj 2110 Tempter of the Bone
    poj 2823 Sliding Window
    fzu 1894 志愿者选拔
    hdoj 1754 I Hate It
    poj2404中国邮递员
  • 原文地址:https://www.cnblogs.com/augustuss/p/13466154.html
Copyright © 2020-2023  润新知