::after伪类1px边框线条在pc端125%或者150%分辨率下变粗解决方法

于 2024-08-05 11:13:34 发布
阅读量53 收藏
点赞数 2
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36093530/article/details/140921885
版权

有时设置边框时会使用到:after伪类方法,比如

::after{

   content: '';

   position:

   absolute;

   left: 12px;

   right: 12px;

   bottom: 0px;

   height: 1px;

   background-color: #dee2ed;

}

 在pc端125%或者150%分辨率下会存在变粗情况：

 解决方法：不设置height和background-color,改为使用border-bottom

蜂巢糖FCT
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS伪类:before在元素之前 :after 在元素之后实例讲解
09-25
本教程简单的介绍一下关于CSS伪类:before, :after详解:before 伪元素在元素之前添加内容;after 伪元素在元素之后添加内容;有需要了解的朋友可以参考一下
CSS :befor :after 伪元素的巧妙用法
09-27
本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景，如填充文本、作为iconfont、进度线、时间线以及几何图形，感兴趣的朋友一起看看吧
Css样式width=1px粗细不一样的问题解决方法
weixin_45931904的博客
09-03 1088
Css样式width=1px粗细不一样的问题解决方法
【每日十分钟前端】基础篇6，在HTML页面上展示 ‘＜div＞＜/div＞’字符串、1px边框变粗解决怎么解决，1px边框为什么会变粗、break与continue
u013035708的博客
02-24 951
1、如何在HTML页面上展示 这几个字符？ 2、1px边框变粗解决怎么解决，1px边框为什么会变粗？ 3、break与continue有什么区别？
1px线变粗的原因
zhangzixue_的博客
06-10 1466
1px线变粗的原因 在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，UI审查的时候也常常会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经是1px了，为什么看着还是那么粗呢？ 要知道问题的原因首先要了解一下几个概念： (1)物理像素(physi...
移动端1px像素问题及解决办法
热门推荐
xuexizhe88的博客
06-04 1万+
        在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。一、像素的理解        像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细...
1像素边框问题
weixin_43905830的博客
04-22 1014
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。 一、像素的理解 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更...
css面试题总结
ljhhappy666的博客
02-18 493
1.null，undefined的区别？ null表示一个对象被定义了，但存放了空指针，转换为数值时为0。 undefined表示声明的变量未初始化，转换为数值时为NAN。 typeof(null) – object; typeof(undefined) – undefined 2.CSS3新增伪类有那些？ p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。 p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个
HTML+CSS（PC端+移动端）
qq_57003087的博客
06-01 4497
HTML+CSS基础（PC端+移动端）
牛笔了！字节跳动大佬整理：CSS-核心知识（万字长文，值得收藏！(1)
2401_84411072的博客
05-03 786
之前我们通常是在预处理器里才可以使用变量，而现在 CSS 里也支持了变量的用法。通过自定义属性就可以在想要使用的地方引用它。自定义属性也和普通属性一样具有级联性，申明在 :root 下的时候，在全文档范围内可用，而如果是在某个元素下申明自定义属性，则只能在它及它的子元素下才可以使用。自定义属性必须通过--x的格式申明，比如：–theme-color: red;使用自定义属性的时候，需要用 var 函数。比如：定义自定义属性:root {使用变量h1 {复制代码。
移动端1像素边框问题
weixin_45786214的博客
04-09 427
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。 一、像素的理解 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。 1、...
css中伪类:after的用法(三种方式)
09-25
其中一个不那么常见的伪类是`:after`，它允许开发者在元素内容之后添加额外的生成内容。`:after`伪类通常与`content`属性一起使用，以在元素的常规内容后面插入文本、图像或其他类型的内容。 `:after`伪类的基本...
CSS3中伪元素::before和::after的用法示例
09-24
before 和 after其实就是附着在元素前后的伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，这篇文章主要给大家介绍了关于CSS3中伪元素::before和::after的用法...
CSS伪元素：after：before的特殊用法demo
06-19
在这个特定的示例中，我们关注的是CSS中的两个重要概念：伪元素`:after`和`:before`。这两个伪元素允许我们在不添加额外HTML标记的情况下，向元素的内容中插入内容。 `:after`和`:before`伪元素在CSS3中被引入，...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1543
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 445
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
html+css+js实现一个简单的电商商城首页
最新发布
爱敲代码的卡拉米的博客
08-02 212
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 960
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
对input使用伪类(::after,::before)不显示的解决方法
06-09
在使用CSS伪类`::before`和`::after`时，如果它们的content属性没有被设置或者设置为空字符串，那么它们是不会显示的。如果你希望在使用这些伪类时也能让它们显示出来，可以尝试以下几种方法： 1. 设置content属性的值为一个空格或者其他字符，例如： ```css .my-element::before { content: " "; /* 其他样式 */ } ``` 2. 将伪类的display属性设置为`block`或者`inline-block`，例如： ```css .my-element::before { display: inline-block; /* 其他样式 */ } ``` 3. 为伪类设置宽度和高度属性，例如： ```css .my-element::before { content: ""; width: 10px; height: 10px; /* 其他样式 */ } ``` 以上方法可以根据具体情况进行选择和组合，以达到让伪类显示出来的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值