第5车厢-一切都是假的！::before应用篇

本篇介绍伪元素系列中的::before/::after概念及实例

假的真不了，真的假不了～一起来看看伪元素系列中的::before/::after呗！

昨天已分类过CSS选取器，今天要来整理其中最常用之一伪元素::before/::after

伪元素是什麽?

「伪元素」它其实并不是真正网页里的元素(也就是原始码没有)，所以我们常常看到文章都会称这个元素是假的！
而它真正生成是透过 CSS 在一个 HTML 的标签内新增的...

伪元素常用的有哪些?

选择器	说明
`::first-line`	元素的第一`行`
`::first-letter`	元素的第一个字
`::before`	元素`前`新增内容
`::after`	元素`後`新增内容

基本::before/::after用法

此元素默认为行内(inline)元素

从上面程序码中，发现文字是放在content属性里面
提醒:
::before跟content可是密不可分的喔！
没有它就没有今天的::before，也就是我们将content拿掉後就会消失了！(如下图)

`content`属性中可以使用文字，还能使用什麽?

最常用的大概是

String // 字串
Counter // 数值
Attr // HTML属性的值

还有其他喔~详细可以参考MDN介绍

实务应用范例

接着就看一下姐姐实务上应用於标题的部分，像是

/*html*/
<h1>姐姐的`微`前端便车~开跑啦！</h1>

/*css*/
h1::before , h1::after{
  content: "";
  display:inline-block;
  vertical-align: middle;
  width: 100px;
  height: 1px;
  background-color: #006341;
  margin: 0 10px;
}

/*html*/
<div class='h3Wrap'>
   <h3>姐姐的`微`前端便车~开跑啦！</h3>
<div>

/*css*/
h3::before,h3::after{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid;
}

h3::before {
    left:-20px;
    top: -20px;
    border-width:3px 0 0 3px;
}

h3::after {
    right: -20px;
    bottom: -20px;
    border-width: 0 3px 3px 0;
}

虽然::before还有很多好玩的地方，不过要注意的是