Stylus 伪元素：让 CSS 玩出 “无中生有” 的新花样

一、Stylus：让 CSS 秒变 "可编程语言"

（一）Stylus 是什么？前端人的 "懒人福音"

你是否曾为 CSS 的静态化编写感到头疼？重复的代码、繁琐的浏览器前缀...... 别愁！Stylus 作为 CSS 预处理框架，能让你用编程思维写样式，轻松实现变量、混合、模块化等功能，代码量直接砍半，开发效率原地起飞～

（二）模块化：CSS 也能 "分而治之"

1. 变量定义：全局样式统一管理

stylus 复制代码

// 定义全局变量
$primary-color = #1e88e5
$max-width = 600px

// 使用变量
.container
  max-width $max-width
  margin 0 auto
  font-family Arial, sans-serif

再也不用满文件找颜色值啦，改一个变量就能全局生效，妈妈再也不用担心我漏改样式啦～

2. 混合（Mixin）：代码复用神器

stylus 复制代码

// 定义圆角混合
border-radiusMixin($radius)
  -webkit-border-radius $radius
  -moz-border-radius $radius
  border-radius $radius

// 使用混合
.button
  border-radiusMixin(8px)
  padding 10px 20px

像调用函数一样复用样式，浏览器前缀自动搞定，写代码就是这么 "懒" 得优雅～

3. 嵌套语法：层级关系一目了然

stylus 复制代码

.nav
  ul
    li
      a
        color #333
        &:hover
          text-decoration underline

告别层层嵌套的选择器复制，HTML 结构直接映射到 CSS，可读性 Up Up！

二、CSS 伪元素：不写 HTML 也能玩出花样

（一）伪元素初相识：虚拟世界的 "隐形帮手"

伪元素是 CSS 中自带的 "魔术手"，不用在 HTML 里加额外标签，就能在元素前后 "凭空" 生成内容，最常用的就是::before和::after。它们像幽灵一样存在于渲染层，虽不在 DOM 树中，但能像真实元素一样设置样式，堪称 "无中生有" 的高手～

（二）核心语法：content 是灵魂，定位是翅膀

css 复制代码

.element::before {
  content: "★"; /* 必须有content，哪怕是空字符串 */
  position: absolute; /* 通常配合定位使用 */
  left: 0;
  top: 0;
}

划重点！content属性是伪元素显示的关键，就算啥都不显示也要写成content: ""，不然伪元素就 "隐身" 啦～

（三）实战案例：这些场景用它准没错！

1. 装饰性图标 / 箭头：告别冗余标签

css 复制代码

.more-btn {
  position: relative;
  padding-right: 20px;
}
.more-btn::after {
  content: ""; /* 空内容也能做图形 */
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg) translateY(-50%); /* 画一个向右下的箭头 */
}

不用加<span class="arrow"></span>，一行 CSS 就能搞定小图标，HTML 瞬间清爽～

2. 动态下划线：hover 效果更灵动

css 复制代码

.link {
  position: relative;
  text-decoration: none;
  color: #000;
}
.link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffc0cb;
  transform: scaleX(0); /* 初始隐藏 */
  transition: transform 0.3s ease;
}
.link:hover::before {
  transform: scaleX(1); /* hover时展开 */
}

下划线从中间 "生长" 出来的效果，伪元素轻松实现，动画过渡超丝滑～

3. 清除浮动：经典 clearfix hack

css 复制代码

.clearfix::after {
  content: "";
  display: table; /* 触发BFC */
  clear: both;
}

老前端都懂的 "祖传代码"，一句话解决浮动坍塌问题，伪元素功不可没！

三、强强联手：Stylus + 伪元素打造丝滑体验

（一）用 Stylus 简化伪元素代码

stylus 复制代码

// 定义伪元素下划线混合
underline-hover($color)
  position relative
  &::before
    content ""
    position absolute
    bottom 0
    left 0
    width 100%
    height 2px
    background $color
    transform scaleX(0)
    transition all 0.3s ease
  &:hover::before
    transform scaleX(1)

// 使用混合
.button
  underline-hover(#f00) // 直接传入颜色值
  padding 10px 20px

用 Stylus 的混合功能封装伪元素逻辑，以后写 hover 效果只要一句话，代码量暴减还更规范～

（二）完整案例：带箭头的响应式按钮

HTML 结构（超简洁！）

html 复制代码

<a href="#" class="btn">点击我</a>

Stylus 样式（逻辑清晰）

stylus 复制代码

$btn-padding = 12px 24px
$arrow-width = 10px

.btn
  display inline-block
  padding $btn-padding
  background #ffc0cb
  color #fff
  text-decoration none
  position relative
  overflow hidden
  cursor pointer

  // 左箭头伪元素
  &::before
    content ""
    position absolute
    left -$arrow-width
    top 50%
    width $arrow-width
    height $arrow-width
    border-top: 2px solid currentColor
    border-left: 2px solid currentColor
    transform rotate(-45deg) translateY(-50%)
    opacity 0
    transition all 0.3s ease

  &:hover::before
    left 20px
    opacity 1

点击按钮时，箭头从左侧 "滑入"，结合 Stylus 变量和伪元素动画，效果灵动代码还好看～

四、避坑指南：这些细节别忽略

伪元素的层叠顺序 ：默认在父元素内容之上，可用z-index调整，别让它 "躲" 在其他元素后面～
Stylus 的作用域 ：变量和混合尽量放在公共文件，通过@import引入，避免重复定义～
浏览器兼容性 ：伪元素现代浏览器支持良好，但 IE8 及以下只认单冒号:before，老项目记得兼容～

五、总结：让 CSS 开发更有 "技术感"

Stylus 和伪元素就像 CSS 的左膀右臂：前者让样式编写更具逻辑性，后者让页面效果更具创造性。学会它们，不仅能写出更简洁优雅的代码，还能实现各种炫酷效果，从此告别 "CSS 苦手" 称号～

下次遇到装饰性图标、动态效果，记得试试哦🤓