CSS3伪类元素 before和after 设置背景尺寸

来源博客：【Harryの心阁】

伪类元素

1. 是行内元素，直接设置宽和高是没有反应的，使用相对定位absolute或者给伪类元素加display:block/inline-block 才能设置宽高
2. 要注意content中如果设置图片后，无法控制其大小
3. 将图片用作背景效果，通过background-size控制其大小，而且要注意先写background：url()再写background-size否则效果无法实现

• 错误示范

section ul a:nth-child(2):before {
    content: '';
    position: absolute;
    top: -69px;
    left: 12px;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: .625rem;
    background-size: 4.5rem; 
    //这样写到前面是无法控制图片大小的
    background: url() no-repeat;
}

• 正确示范

section ul a:nth-child(2):before {
    content: '';
    position: absolute;
    top: -69px;
    left: 12px;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: .625rem;
    background: url() no-repeat;
    background-size: 4.5rem;
}

以上为个人开发过程中遇到的问题