div{

width: 220px;

height: 220px;

position: relative;

}

div:hover::after{

content: "";

display: block;/* 原先是行内元素，必须转换宽高才有效 */

width: 100%;/* 宽高100%，因为伪元素的盒子在div内部，是div的100% */

height: 100%;

box-sizing: border-box;/* css3内减盒子，添加边框盒子宽高不变 */

border: 5px solid rgb(218, 198, 198);

position: absolute;/* 添加的盒子定位到图片上去 */

left:;

top:;

}

利用伪元素和css3实现鼠标移入下划线向两边展开效果

一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...

转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...

css3 盒模型与 伪元素综合应用案例

先来简略理解下盒模型: 在 css3 之前,盒模型默认为 box-sizing : content-box,这种模式下的盒模型计算大小方式为,width + padding + border : 而 ...

CSS before和after伪元素

CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...

理解伪元素 :Before 和 :After

层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...

css伪元素用法大全

本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

伪元素before after

什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以js无法操作他.那为什么叫他"元素"?因为我们可以对其进行跟元素几乎无差别的操作. 伪元 ...

CSS中的伪类与伪元素

在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

伪元素 :Before 和 :After的学习

层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...

随机推荐

nodejs中exports与module.exports的实践

只要是在nodejs中写自己的文件模块就少不了会遇到module.exports和exports的使用,看别人的代码大多都会使用“module.exports=exports=

Gradle 笔记

网上有一篇文章说的很明白,图文来教你在eclipse下用gradle 来打包Androidhttp://blog.csdn.net/x605940745/article/details/4124268 ...

Truncate table、Delete与Drop table的区别

Truncate table.Delete与Drop table的区别 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNC ...

docker中运行ASP.NET Core Web API

在docker中运行ASP.NET Core Web API应用程序 本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过 ...

iOS错误之-Presenting view controllers on detached view controllers is discouraged

遇到这个警告后找了一下网络资源,基本上只说通过 [self.view.window.rootViewController presentViewController:controller animat ...

Oracle的用户、角色以及权限相关操作

1.创建用户create user KD identified by 123456;2.授予连接数据库的权限grant connect to KD;3.将Scott用户的emp表授权给KD可以查询gr ...

超超超简单的bfs——POJ-1915

Knight Moves Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 26102   Accepted: 12305 De ...

android sdk 历史版本下载地址

https://developer.android.google.cn/studio/archive#android-studio-3-0?utm_source=androiddevtools&amp ...