CSS 小知识点之伪元素的应用

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)

清除浮动

.news {
  background-color: gray;
  border: solid 1px black;
}

.news img {
  float: left;
}

.news p {
  float: right;
}

.clear::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

<div class="news">
  <img src="https://cdn.pixabay.com/photo/2021/08/06/05/04/mountain-6525356__340.jpg" />
  <p>some text</p>
  <div class="clear"></div>
</div>

分割线

.line::before,
.line::after {
  content: '';
  display: inline-block;
  border-top: 1px solid #ddd;
  width: 200px;
  margin: 5px;
}

<p class="line">分割线</p>

计数器

.chooses {
  counter-reset: letters;
}

.chooses input:checked {
  counter-increment: letters;
}

.choose span::after {
  content: counter(letters);
}

<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>

冒泡三角形

.tooltip {
  position: relative;
  padding: 10px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #000;
  display: inline-block;
}

.tooltip .caret,
::before {
  width: 10px;
  height: 10px;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  background: #fff;
  display: inline-block;
  transform: rotateZ(45deg);
  position: absolute;
  top: -7px;
}

<div class="tooltip">
  <span class="caret"></span>
  Hello World
</div>

指标牌

.tag {
  width: 100px;
  background: #EF001E;
  height: 32px;
  position: relative;
  border: 1px solid transparent;
}

.tag::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 12px solid #fff;
}

.tag::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translate(0, -50%);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 8px solid #EF001E;
}

<div class="tag"></div>