HiDocs
Search K

Appearance

::before 和::after 详解 ​

在元素的 ::before 和 ::after 中插入内容——content 属性（如果没有写 content 样式，伪元素会失效）

image-20221015122850072

contnt 属性的类别：

image-20221015122918676

4.在每个 <h1> 元素的内容之前插入一幅图：

css
h1::before {
  content: url();
}

5.在每个 <h1> 元素的内容之后插入一幅图像：

css
h1::after {
  content: url();
}

6.使所选文本在蓝色背景上显示为红色：

css
h1::selection {
  color: red;
  background: blue;
}

可以应用于 ::selection 的属性

  • color

  • background

  • cursor

  • outline

7.伪元素与 CSS 类结合使用：（将以粉色和较大的字体显示 class="name" 的段落的首字母）

css
p.name::first-letter {
  color: hotpink;
  font-size: 200%;
}

<p class="name">你好漂亮！</p>

五、伪类和伪元素的应用 ​

1、画分割线 ​

效果如图

image-20221015125225179

css
<style>
    * {
      padding: 0;
      margin: 0;
    }
	/*content没有内容也一定要记得写*/
    .line::before, .line::after {
      content: '';
      display: inline-block;
      width: 300px;
      border-top: 1px solid black;
      margin: 5px;
    }
  </style>
</head>
<body>
  <p class="line">此处为分割线</p>
</body>

2、清除浮动 ​

如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加 after 伪类撑开父元素高度，因为 after 就是其最后一个子元素。

代码如下：

css
.clear::after {
  content: "";
  display: block;
  clear: both; /*清除（忽略）前面的div设置的float浮动，但是不会影响原来的浮动效果！*/
}

3、计数器 ​

使用 CSS 实现计数器，用到的属性有：

  • counter-reset: 属性设置某个选择器出现次数的计数器的值。默认为 0。

  • counter-increment: 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

  • content: 插入生成的内容。

代码如下：

css
<head>
  <style>
    .chooses {
      counter-reset: letters; /*letters相当于是自定义的变量*/
    }
    .chooses input:checked {
      counter-increment: letters;
    }

    .choose span::after {
      content: counter(letters);
    }
  </style>
</head>
<body>
  <div class="chooses">
    <input type="checkbox">a
    <input type="checkbox">b
    <input type="checkbox">c
    <input type="checkbox">d
    <input type="checkbox">e
    <input type="checkbox">f
    <input type="checkbox">g
    <input type="checkbox">h
    <input type="checkbox">i
    <input type="checkbox">j
  </div>
  <p class="choose">我选择了<span></span>个字母</p>
</body>

效果如下：

img