CSS伪元素after、before使用示例(一)

阅读更多
  大家都知道使用CSS可以容易使用以下效果。

CSS伪元素after、before使用示例(一)_第1张图片


  配合after、before伪元素,可以将上述效果与DOM元素结合,用极简有DOM元素(不用增加新的元素)实现原来较复杂、或无法实现的效果,如气泡文字、方块修饰、下划线等。

CSS伪元素after、before使用示例(一)_第2张图片

CSS伪元素after、before使用示例(一)_第3张图片

CSS伪元素after、before使用示例(一)_第4张图片


  附:文中用到的CSS代码。阅读时请注意,本文未充分考虑浏览器兼容问题。
    
  • CSS伪元素after、before使用示例(一)_第5张图片
  • 大小: 51.8 KB
  • CSS伪元素after、before使用示例(一)_第6张图片
  • 大小: 14.3 KB
  • CSS伪元素after、before使用示例(一)_第7张图片
  • 大小: 24.6 KB
  • CSS伪元素after、before使用示例(一)_第8张图片
  • 大小: 23.5 KB
  • 查看图片附件

你可能感兴趣的:(css,:after,:before)