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

最新推荐文章于 2023-02-22 23:11:32 发布

五香麻辣豆腐皮

最新推荐文章于 2023-02-22 23:11:32 发布

阅读量1.6k

点赞数 2

文章标签： CSS 选择器伪类选择器

本文链接：https://blog.csdn.net/meowperth520/article/details/103496753

版权

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

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

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

使用场景一：

我们经常在论坛中看到如下效果：
在这里插入图片描述
这类似一个菜单，点击标题就可以快速跳转到指定的页面，而这些标题之间都有一个“>”符号进行间隔，而这个效果，我们就可以使用它们来实现了，下面贴上代码片段

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

在伪类中我们看到有个属性content，它是给新插入的元素设定内容的，其中为纯文本，即便你写入各种便签，它也会以文本的形式显示（如果content中为空也就是’’，那么我们在页面中看不到任何内容，但是这个元素还是存在的），好我们看看这段代码的结果
在这里插入图片描述
效果很棒吧！！

使用场景二：

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

<head>
    <meta charset="UTF-8">
    <title>hover伪类选择器演示</title>
    <style>
        span {
            display: inline-block;
            border: 1px solid #4687ff;
            padding: 5px 8px;
        }
        span:hover {
            border: 2px solid #ff5c70;
        }
    </style>
</head>
<body>
    <div>
        <span>盒子1</span>
        <span>盒子2</span>
        <span>盒子3</span>
        <span>盒子4</span>
    </div>
</body>

运行代码后，我们发现一个问题，的确边框颜色变红并且变粗了，但是有一个缺陷就是，边框会有轻微的错位跳动的现象，如下图所示：
在这里插入图片描述
现在我们就可以使用before或者after伪类来解决这一问题了，贴上代码片段：

<head>
    <meta charset="UTF-8">
    <title>before伪类选择器实现鼠标移入边框着重显示效果</title>
    <style>
        /* 注意该元素需要将定位方式更改为相对布局 */
        span {
            display: inline-block;
            border: 1px solid #4687ff;
            padding: 5px 8px;
            position: relative;
        }
        /* 将插入的元素定位方式更改为绝对布局 */
        span:hover:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            border: 2px solid #ff5c70;
            top: -2px;
            left: -2px;
        }
    </style>
</head>
<body>
<div>
    <span>盒子1</span>
    <span>盒子2</span>
    <span>盒子3</span>
    <span>盒子4</span>
</div>

运行后的效果，如下图所示：
在这里插入图片描述
整个实现的思路就是通过插入一个元素，覆盖在其上的的原理，达到效果
好了，本次的分享就到这里了。

五香麻辣豆腐皮

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS中before、after伪类选择器的巧用

大家好，今天给大家带来使用css中before、after实现两个效果，话不多说，我们先来看看，before和after它们的作用是什么选择器作用before向选定的元素前插入内容after向选定的元素后插入内容作用描述简单也容易理解，就是在指定的元素前面或者后面添加额外的内容，那么具体我们能够用到什么地方呢？使用场景一：我们经常在论坛中看到如下效果：...
复制链接

扫一扫