css 伪元素

最新推荐文章于 2025-05-06 09:43:14 发布

weixin_33757911

最新推荐文章于 2025-05-06 09:43:14 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qmxj-blog/p/6641376.html

本文详细介绍了CSS伪元素:before与:after的使用方法，包括如何利用它们为元素添加额外的内容，以及如何通过:hover状态改变这些内容的样式。特别强调了在:before与:after中必须使用content属性，并解释了如何通过定位属性实现动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

p:first-line向文本的首行设置特殊样式

p:first-letter向文本首字母设置特殊样式

重点讲：before，：after

1.这两个伪元素中必备“content”,因为是向目标元素的前面、后面插入元素

2.position：absolute则是相对于目标元素

#font::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 0;border-color: white;
    border-style: solid;
    border-width: 0 3px;
    overflow: hidden;
    visibility: hidden;
    transition: all .8s;
}
#font:hover::before{
  top:0;
  height: 100%;
  visibility: visible;
}