less伪元素如何生成横线

98 阅读1分钟

less伪元素生成横线

伪元素

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。伪元素主要有:
  • ::first-letter 第一个字母的样式
  • ::first-line 首行文字的样式
  • ::before 元素头部添加的修饰
  • ::after 元素尾部添加的修饰
  • ::placeholder input的占位符样式
  • ::selection 被选中元素的样式

伪类

用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性,比如a标签的hover表示鼠标经过的样式,visited表示访问过的链接的样式,更多的用来描述元素状态变化时的样式,伪类主要有:
  • :link
  • :visited
  • :hover
  • :active
  • :focus
  • :lang(fr)
  • :not(s)
  • :root
  • :first-child
  • :last-child
  • :only-child
  • :nth-child(n)
  • :nth-last-child(n)
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :empty
  • :checked
  • :enabled
  • :disabled
  • :target

less编写

.clearfix {
  display: block;
  &:after {
    content: " ";
    display: inline-block;
    width:2rem;
    height:0.08rem;
	background-color:#000;
  }
}

css输出

.clearfix {
  display: block;
}
.clearfix:after {
 	content: " ";
    display: inline-block;
    width:2rem;
    height:0.08rem;
	background-color:#000;s
}