`

CSS伪元素 特效

    博客分类:
  • CSS
css 
阅读更多

你所不知的 CSS ::before 和 ::after 伪元素用法

 

(1)鼠标移上链接,出现方括号

 

 

 

 

 

 

 

 

 

 

 

a {
	position: relative;
	display: inline-block;
	outline: none;
	text-decoration: none;
	color: #000;
	font-size: 32px;
	padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }

 

 

(2)悬浮出现双边框



  

a {
	position: relative;
	display: inline-block;
	outline: none;
	text-decoration: none;
	color: #000;
	font-size: 32px;
	padding: 0 10px;
}

/* 大框 */
a:hover::before, a:hover::after { 
	content: "";
	display: block;
	position: absolute;
	top: -15%%;
	left: -14%%;
	width: 120%;
	height: 120%;
	border-style: solid;
	border-width: 4px;
	border-color: #DDD;
 }

/* 小框 */
 a:hover::after {
 	top: 0%;
 	left: 0%;
	width: 100%;
	height: 100%;
	border-width: 2px;
 }

 

  • 大小: 52.7 KB
  • 大小: 2.2 KB
分享到:
评论

相关推荐

    纯CSS3炫酷元素边框线条动画特效

    总的来说,这个“纯CSS3炫酷元素边框线条动画特效”充分利用了CSS3的高级特性,如伪元素和关键帧动画,为网页设计带来了丰富的视觉效果和交互体验。这种技术不仅减少了对外部库的依赖,还提高了页面性能,是现代前端...

    css 加载动画特效

    2. **滑动加载条**:使用CSS伪元素和`width`变化,可以创建出从左到右或从右到左移动的加载条。 ```css .load-bar { width: 100px; height: 10px; background-color: #ccc; position: relative; } .load-bar::...

    CSS滑动门特效

    这个特效主要利用CSS的伪类和JavaScript来实现,使得元素在鼠标悬停时能够呈现出类似门开启或关闭的效果。本篇文章将详细介绍如何利用JavaScript实现这一特效。 首先,我们需要理解CSS在滑动门特效中的作用。CSS...

    CSS雪花特效

    - 接着,使用CSS伪元素如`:before`或`:after`,为每个雪花创建一个元素。这些伪元素可以通过`content: ''`生成,并设置相应的样式。 2. **定义雪花样式** - 使用CSS的`width`和`height`属性设置雪花的大小,通常...

    几款不错的css特效

    在学习和使用这些CSS特效时,还需要了解和掌握更多的CSS3特性,如过渡(transition)、动画(animation)、伪元素(pseudo-elements)和选择器(selectors)等,以提升网页的视觉效果和用户体验。

    CSS好用的特效

    这可以通过CSS的伪元素和`:hover`选择器实现。创建两个图片元素,一个显示小图,一个隐藏大图,然后在`:hover`状态下改变隐藏大图的`display`属性,或者使用CSS的`clip-path`或`transform`来部分显示大图。 5. mac...

    一些CSS实例及特效

    1. **选择器**:CSS选择器用于定位HTML或XML文档中的元素,如`class`选择器(`.classname`)、`id`选择器(`#theid`)、元素选择器(`div`)以及更复杂的伪类和伪元素选择器(`:hover`, `::before`)。 2. **盒模型...

    CSS酷站CSS特效华丽CSS

    CSS滤镜和混合模式可以创造出独特的图像效果,而伪元素和自定义字体则能为网站增添个性化元素。 以下是一些CSS精美示例: 1. **响应式布局**:使用媒体查询(`@media`)根据设备屏幕大小调整布局,确保在不同设备...

    CSS3科技面部元素特效.zip

    这个“CSS3科技面部元素特效.zip”压缩包文件包含了一组利用CSS3技术创建的特效,特别适合用于科技主题的网页设计,如大数据展示、高科技元素的页面背景或页面修饰元素。 这些特效通常通过CSS3的新特性来实现,比如...

    超赞CSS3特效集合-28个

    首先,CSS3引入了许多新的选择器,如伪类选择器(`:hover`, `:active`, `:focus`)和伪元素选择器(`::before`, `::after`),这些使得元素的动态效果和交互性大大增强。例如,一个特效可能展示如何使用`:hover`来...

    CSS中:before和:after伪元素使用的奇技淫巧

    CSS伪元素的使用非常灵活,对于网页设计师来说,掌握这些技巧能够让页面更加生动有趣,而不必依赖于复杂的JavaScript代码。无论是为了增加视觉效果、提供动态反馈,还是为了解决某些布局问题,:before和:after伪元素...

    纯div+css 菜单导航特效

    这可以通过CSS的`:hover`伪类实现。 2. **滑动动画**:菜单项在展开或收起时可能会有平滑的滑动效果,这种效果可以通过CSS的`transition`属性和`transform`属性实现。 3. **渐变过渡**:在切换菜单项时,可以设置...

    HTML5+CSS3登陆特效

    1. **选择器增强**:CSS3引入了更精确的选择器,如类选择器(`.class`)、ID选择器(`#id`)、伪类(`:hover`、`:active`、`:focus`)以及属性选择器,使得样式应用更加灵活。 2. **过渡和动画**:`transition`属性...

    CSS特效和JS+CSS特效

    CSS特效主要负责元素的样式、布局和动画,而JavaScript则为网页添加交互性,两者结合能创造出令人惊叹的动态用户体验。 首先,CSS特效涵盖了从简单的颜色、字体调整到复杂的过渡、动画和3D效果。例如,通过使用伪类...

    CSS常用特效 源代码

    源代码可能包含使用这些伪类和伪元素实现的各种特效。 5. **阴影和边框**:CSS提供了box-shadow和text-shadow属性,用于为元素添加阴影效果,增强立体感;边框样式多样,可以实现圆角、虚线等效果,源代码中会有...

    纯css3炫酷粒子动画特效

    这个特效主要依赖于CSS3的动画(Animations)和转换(Transforms)特性,以及可能的伪元素(Pseudo-elements)和伪类(Pseudo-classes)。下面我们将深入探讨这些关键知识点。 首先,**CSS3动画**是CSS3的一个重要...

    CSS:雪花飘落特效

    为了创建多个雪花并随机分布,我们可以使用JavaScript生成多个`.snowflake`元素,但根据题目要求,我们将通过CSS伪元素实现这一目标: ```css #snow::before, #snow::after { content: ""; position: absolute; ...

    CSS3文字特效艺术文字样式代码.zip

    首先,CSS3引入了许多新的选择器,如伪类选择器(`:hover`, `:active`, `:focus`等)和伪元素选择器(`::before`, `::after`),它们使得我们可以对文字进行更精细的控制。例如,可以通过`:hover`来改变鼠标悬停时的...

    文字弹性跳动CSS3动画特效.zip

    CSS3是CSS(层叠样式表)的第三个主要版本,它引入了大量新特性,如动画、转换、伪元素、选择器等,大大增强了网页的视觉表现力。 【描述】中的“非常实用的特效代码,可以完美运行,可以二次修改!”意味着这个...

    2021新年倒计时CSS3雪花特效.zip

    这里的CSS特效指的可能是CSS3的一些高级特性,如3D转换、动画和伪元素等,它们被用来实现雪花飘落的效果。CSS3允许开发者创建动态、交互式的视觉效果,而无需JavaScript的介入,这大大减轻了浏览器的计算负担。 3. ...

Global site tag (gtag.js) - Google Analytics