CSS伪类实现左右横线效果

使用场景：有时候文章标题需要添加左右横线的效果，通过CSS伪类可以很好的实现该效果
OS：该方法是在就业前学习中某个学习博客看到的，忘了是什么博客，那时候很喜欢去玩这些小技巧，一看到就特别就特别的沉迷，一定要实践的那种，两年后再次使用，总觉得少点什么，所以还是记一下，满足一下心里知识的空虚感。

vue文件

index.vue

 <!-- html -->
<template>
  <header class="header">
    <span class="item-title_text role-title_text">角色 </span>
   </header>
</template>

 <!-- css -->
<style lang="scss" scoped>
  .item-title_text {
     display: block; // 必须是块元素（形成上下居中效果） 否则无效果
     position: relative;// 定位为横线的父元素
   }

  .item-title_text:before, .item-title_text:after {
      content: '';// CSS伪类用法
     position: absolute;// 定位横线的位置
     top: 50%;
     background-color: #eee;
     width: 30%;// 横线的宽度，每边分半为50%则是左右两边横线之间没有空隙
     height: 1px;// 横线的高度
   }

  .item-title_text:before {// 左横线
     left: 10%;// 距离容器左边的距离
   }

  .item-title_text:after {// 右横线
     right: 10%;// 距离容器右边的距离
   }
</style>