input后面::before ::after 无效

最新推荐文章于 2023-06-11 16:54:30 发布

丛林大野熊

最新推荐文章于 2023-06-11 16:54:30 发布

阅读量1.8k

点赞数

分类专栏： html css 文章标签： css

本文链接：https://blog.csdn.net/cldyxiong/article/details/118364212

版权

html css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天本来想用input 做个 带倒三角的 当时想用伪类会比较方便 就用input ::after 发现没有效果

在这里插入图片描述

		<style>
  		.box {
  			margin-left: 10px;
  			height: 50px;
  			width: 210px;
  			box-sizing: border-box;
  			position: relative;
  		}
  		.box::after {
  			transition: all 0.1s;
  			transform: rotate(45deg);
  			left: 185px;
  			top: 10px;
  			position: absolute;
  			content: '';
  			width: 10px;
  			height: 10px;
  			border: 1px solid #000;
  			border-top: none;
  			border-left: none;
  		}
  		.box:hover::after {
  			transform: rotate(225deg);
  			top: 20px;
  		}

  		input {
  			width: 210px;
  			height: 40px;
  			box-sizing: border-box;
  			border-radius: 10px;
  		}
  	</style>
  </head>
  <body>
  	<div class="box">
  		<input type="text" />
  	</div>
  </body>

在给input里加翻转效果的时候发现用.box::after::hover 添加效果是无效的后来只能改成.box:hover ::after
后来查找资料发现一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后

丛林大野熊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
input后面::before ::after 无效

今天本来想用input 做个带倒三角的当时想用伪类会比较方便就用input ::after 发现没有效果 <style> .box { margin-left: 10px; height: 50px; width: 200px; box-sizing: border-box; position: relative; } .box::after { transition: all 0.1s;
复制链接

扫一扫

专栏目录