Skip to content

Latest commit

 

History

History

CSS

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

A list of notes for CSS

1. CSS Pseudo-elements 伪元素

1.1 Syntax

selector::pseudo-element {
    property: value;
}

1.2 usage

  • The ::first-line Pseudo-element
  • The ::first-letter Pseudo-element

Several pseudo-elements can also be combined.

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
  • CSS - The ::before Pseudo-element
  • CSS - The ::after Pseudo-element
#imgTag {
	position: relative;
	width: 80px;
	}
#imgTag::before {
	position: absolute;
	width: 80px;
	content: url("before.svg");
	}
#imgTag::after {
	position: absolute;
	width: 80px;
	content: url("after.svg");
	}

add content before/after the element

According to wonyun :

  • 伪元素不属于文档,所以js无法操作它

  • 伪元素属于主元素的一部分,因此点击伪元素触发的是主元素的click事件

  • 原文说块级元素才能有:before, :after,其实是不妥的,大部分行级元素也可以设置伪元素,但是像img可替换元素,因为其外观和尺寸有外部资源决定,那么如果外部资源正确加载,就会替换掉其内部内容,这时伪元素也会被替换掉,但是当外部资源加载失败时,设置的伪元素是可以起作用的。(替换破损图片)

  • before, main, after, 只有main能被选中

  • 优点

    • 减少dom节点数
    • 让css帮助解决部分js问题,让问题变得简单
  • 缺点

    • 不利于SEO
    • 无法审查元素,不利于调试

1.3 exercise

  • Triangle & Triangle with border
.trangle{
    width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;
    }

To draw a triangle with border, we need to use ::before & ::after to draw two different triangle with different color:
demo

<div class='main'></div>
<style>
    .main{
        position:relative;
        width:0;
        height:0;
    }
    .main:before{
        content:"";
        position:absolute;
        top:3px;
        right:-6px;
        display:block;
        border:20px solid;
        border-color:transparent transparent transparent #fc0;
        index:1;
    }
    .main:after{
        content:"";
        position:absolute;
        display:block;
        top:7px;
        right:0;
        border:16px solid;
        border-color:transparent transparent transparent #900;
        index:2;
    }
</style>