content-none 在伪元素中不生效

content-none 在伪元素中不生效

&::after { 
    @apply content-none ...
}


我发现,如上CSS代码,在项目运行后,伪元素是不生效的。需要为 content 属性设置个空值, 才能展示。

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
迟钝的Chu 2023-12-27 22:14:20
content-['']

我用这个写法生效

阳光善良正直 2023-12-26 09:45:56

用 content-empty


Brian 2023-11-18 10:43:48

那你看看你的css中有没有编译出来 对应的css样式?


或者直接写在class上,按理说,应该是生效的。


你有两种方案,


第一,在rules里面设置全局的css配置;

第二:尝试一下, class="after:content-none"

https://img1.sycdn.imooc.com/climg/655824e30955541413640430.jpg

  • 提问者 coolpi21 #1

    谢谢老师的回复。
    伪元素不生效的主要问题是,当你在伪元素的 `content` 设置为 `none` 时,伪元素是不会生成的(DOM结构上不存在),所以我认为在伪元素中设置 `content: none` 是存在问题的。
    我看了 MDN 官方文档的介绍,也说明了该问题。
    https://img1.sycdn.imooc.com/climg/655ab7d109cf09f514880198.jpg

    2023-11-20 09:35:46
  • Brian 回复 提问者 coolpi21 #2

    对的,我以为你说的是使用伪类元素来创建一个视觉上的效果。


    一般在做法是元素上设置一个relative,在伪元素上设置一个absolute定位,这样看起来像是一个dom,实际上不是。

    设置一个rules:

    ['pseudo-background', { 
            content: '""', 
            position: 'absolute', 
            width: '100%', 
            height: '100%', 
            background: 'blue', 
            top: 0, 
            left: 0 
          }
        ],

    使用 Unocss 的同时,通过 CSS 伪元素创建了一个背景效果。


    <div class="relative pseudo-background">这里是内容</div>


    这种利用 Unocss 的便利性,同时保持了 CSS 的灵活性和强大功能。这种技术尤其适用于创建装饰性背景、分隔线或其他视觉效果

    2023-12-03 10:51:21
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端高级工程师(大前端)
  • 参与学习       297    人
  • 解答问题       366    个

全新打造“技术成长&职业破局”双高体系,深度打通“全栈 + 全流程 +多端+ 提效+AI赋能”,递进式锤炼思维与高阶技能,高效实现能力跃迁,助力成为“驾驭全局,深广兼备,打通多端全栈”的高级工程师

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师